Attempting to establish a type for an object
Consider the following object structure:
{
a: 123,
b: "hello",
c: {
d:"world"
}
}
The keys present in the object are unknown.
To define its type, I would use Record<string, any>
However, what if only one key is known and the rest remain unknown?
In this scenario, let's assume I know the type of c as c:{d: string} but the types of other keys are still unidentified. In such cases, I would retain them as Record<string, any>
Classes of property keys in object types can also incorporate index signatures for known keys, such as string, as long as the property types at known keys align with the property type specified by the index signature. Here's an example based on your scenario:
interface Foo {
c: { d: string };
[k: string]: unknown;
}
This defines that a Foo object has a property c of type {d: string}, and for any key k of type string, the property value associated with that key should belong to the unknown type. Since all types are assignable to unknown, this is considered a valid definition, and your assignment will work as expected:
const obj: Foo = {
a: 123,
b: "hello",
c: {
d: "world"
}
}; // valid
Additional Notes:
You have the option to use the any type instead of unknown if preferred, keeping in mind their respective behaviors. Refer to How to undestand relations between types any, unknown, {} and between them and other types? for more details.
Alternatively, you could utilize the Record utility type like Record<string, unknown> in place of {[k: string]: unknown}, as they essentially evaluate to the same result. Personal preference may vary, but I would opt for the direct index signature over using Record. Visit What is the Record type? for more insights.
If opting for Record, directly adding known keys isn't feasible. In such cases, an intersection type like
{c: {d: string}} & Record<string, unknown>}I am struggling to get my Todo-List working with typescript-react. The code I have doesn't seem to be functioning properly. Here is a snippet of my App.tsx: import { useState } from "react"; import "./App.css"; export default fun ...
After referencing this guide: Parent and children communicate via a service I have decided to utilize a shared service instead of EventEmitter. The reason being that EventEmitter only facilitates communication between parent and child components, which do ...
I'm encountering issues with the data property. interface Props { params: { slug: string }; } const Page = async ({ params }: Props) => { const data: any = await getPage(params.slug); // This section dynamically renders the appropriate orga ...
I'm working on a project with a child component as a map and a parent component as a form. The parent component has a field for writing the address, and when an address is entered, an HTTP request is triggered to find the latitude and longitude coordi ...
let x; x ??= 'abc' console.log(x); // abc Running the code above in the browser console does not cause any issues. However, when attempting to run it in TypeScript, an error is thrown. SyntaxError: Unexpected token '??=' Here is my c ...
Currently, I am working with two separate libraries. The first library emits "raw" DOM events (lib.dom.d.ts), while the other library consumes React.SyntheticEvents. I am seeking advice on the most efficient method to transform the raw event into a Synthe ...
I have a requirement: type AllowedKeys = 'a' | 'b' | 'c' ... and now I want to define a type where the key has to be one of the values in AllowedKeys. For example: type MyType = { a: number; b: string; c: boolean; d: {} / ...
I utilized a Fuse template to construct my angular project. However, upon reloading the page, I encountered broken website elements. The error message displayed is as follows: Server Error 404 - File or directory not found. The resource you are looking fo ...
As I work on developing an application, one of the key features involves allowing users to select others from a list with whom they can create a group chatroom. Additionally, there is a TextField where they can assign a name to their newly created group. ...
Currently, I am working on a contact form that includes checkboxes for users to select multiple options, with the requirement of selecting at least one box. My challenge lies in figuring out how to pass all the selected checkboxes' data to an API usin ...
Every <td> and <tr> in my code has a unique key assigned to it. Check out the complete code of my component below: export default function TableComponent( data: any ) { const columnNames = Object.keys(data.data); const rowIndices = Obj ...
I am encountering an issue while trying to subscribe to an Observable and assign data from the response. The problem is that my code does not wait for the response before executing the console.log(this.newIds) line, resulting in an empty value being logg ...
Just getting started with React Native using typescript. Take the package vector icon for example, we need to include 2 dependencies: 1. "react-native-vector-icons": "^7.1.0" (as a dependency) 2. "@types/react-native-vector-icons": "^6.4.6" (as a dev ...
Can someone help me with this array.map function I'm trying to use: {props.help.map((e, i) => { return <a key={i}>{e.name}</a> })} The {e} object contains keys 'name' and 'href' I keep getting an error message that ...
Attempting to generate an element in React using Typescript based on the given tagName passed as props, along with additional relative element properties depending on that particular tagName. Take a look at the code snippet below: type ElementProps<Tag ...
I am trying to create a stream of Observables with delay and only subscribe to the last one after a specified time. I have three HostListeners in which I want to use to achieve this. I would like to avoid using Observable form event and instead rely on H ...
I am encountering a CORS error specifically when sending delete requests from Angular to Laravel. Additionally, I am facing issues with moving car model images to the directory during posting, resulting in errors. I have implemented a CORS middleware and a ...
Although it may seem simple, there are not many examples of using Angular 2.0 yet. In one of my components, I have a situation where I need to add a class to the body tag. However, my application is bootstrapped deeper than the body element, so I am looki ...
Currently, I am encountering an issue where there are two separate dashboards for different types of users - one for admin and the other for a merchant. The problem arises when an admin logs in on one tab and then a merchant logs in on another tab in the s ...
What distinguishes between performing a type assertion on a function's return value and explicitly typing the return value in the function signature? Let's consider only simple functions with a single return statement. interface Foo { foo: numbe ...