When working with typescript, it's important to define the variable type. Consider this example:
userData: {id: number, name: string};
But what if you want to allow other keys with any types that won't be validated? Is there a way to achieve this?
userData: {id: number, name: string, ...any};
Or perhaps there are modern type transformation operators that can help with this scenario?
If you have any advice or suggestions, it would be greatly appreciated.
Remember to use the syntax [key: string]:
userData: {
id: number
name: string
[key: string]: any;
};
@GrégoryNEUT pointed out that using any is not recommended. Instead, consider using unknown or unions like string | number. It's also possible to type key as a different type, such as number.
Along with @pzaenger's accurate response, it should be noted that it is not recommended to utilize any to specify a type in TypeScript.
The usage of any should be restricted to rare circumstances where you need TypeScript to accept a value without strict typing, as shown in this particular scenario
It is preferable to opt for unknown, which compels the developer to verify additional data before using it
userData: {
id: number;
name: string;
[key: string]: unknown;
};
My goal is to retrieve data from an external API using Typescript. Below is the function I have written: export class BarChartcomponent implements OnInit{ public chart: any; data: any = []; constructor(private service:PostService) { } ngOnInit( ...
We have developed custom typings for the latest version of material-ui@next and successfully included them in the library during the last beta release. For those interested, you can access the index.d.ts file here. However, there seems to be a problem wi ...
As a newcomer to vim, I decided to test my configuration with react and typescript. To do this, I created a simple demo app using the command npx create-react-app demo --template typescript. Next, I opened the directory in neovim by running nvim .. However ...
One thing on my mind: 1. Is it necessary for the names to match when transmitting data from client to my webapi controller? In case my model is structured like this: public class Donation { public string DonorType { get; set; } //etc } But the f ...
We are currently working on transferring data from one component to another using the approach outlined below. We want to display an error message when there is no data available. <div *ngIf="showGlobalError"> <h6>The reporting project d ...
Presenting a functional sidenav demo with Angular 2, TypeScript, and Material Design components. The sidenav features a UL, with the Sites and Users anchors expanding to display their own sub-list. Check out the Plunker here Here is the HTML code for the ...
Overview Upon integrating Storybook.js with my existing Create-React-App project, I found that two new directories were created by default: .storybook src/stories This integration seemed to blur the lines between different aspects of my project, which g ...
As a newcomer to CDK, I have the requirement to set up SQS infrastructure during deployment. The following code snippet is working fine in the environment: export class TestStage extends cdk.Stage { constructor(scope: cdk.Construct, id: string, props: ...
Currently working on a movie app project but encountering issues with handling arguments and displaying them properly using TypeScript. The challenge lies in trying to map the movie object, display them individually on the homepage, and showcase all the re ...
My Vue 2.2.3 application is experiencing difficulties in the build process due to 4 TypeScript-related errors that are perplexing me. This is the error output displayed on the console: Failed to compile with 4 errors ...
I've noticed that the latest release of UI Grid (RC3) has undergone significant architectural changes compared to nggrid. I am encountering some problems with the definitelytyped files for nggrid because they are from a different version. Will there ...
Consider the TypeScript snippet below: type ForwardVal<T> = { [K in keyof T]: string; }; type ForwardKeyOf<T extends string | number | symbol> = { [K in T]: string; }; type ByObj = ForwardVal<number[]>; // string[] ...
Imagine having two interfaces that share some fields and another interface that serves as a superclass: interface IFirst { common: "A" | "B"; private_0: string; } interface ISecond { common: "C" | "D"; private_1: string; } interface ICommo ...
In my typescript application, I am utilizing the FileReader to convert a blob into a base64 image for display within the template. adaptResultToBase64(res: Blob): string { let imageToDisplay : string | ArrayBuffer | null = ''; const re ...
Currently facing an issue with TypeScript and types. I have an array of IDs obtained from checkboxes, which may also be empty. An example of values returned from the submit() function: const responseFromSubmit = { 1: { id: "1", value: "true" }, 2: ...
I am encountering issues with route navigation between child routes, as I keep receiving "routes not found" errors. Despite trying multiple solutions like injecting and refreshing after child configuration, I still face difficulties in navigating to a spec ...
In my project with NextJS v14.1.0, I encountered an issue while using server action in a client component. The error message is showing correctly, but I also receive a TypeError stating that the body is unusable. src/app/auth/account-verification/page.tsx ...
Struggling with something seemingly simple... All I need is for my span tag to take on a class called "store" from a variable in my .ts file: <span [ngClass]="{'flag-icon': true, 'my_property_in_TS': true}"></span> I&apos ...
Following the upgrade of angular and @types/angular to version 1.6.x, an array of TS2694 errors suddenly appeared: error TS2694: Namespace 'angular' does not include an exported member named 'material' error TS2694: Namespace 'ang ...
Having a string representing my file name passed to the react-csv CSVLink<> component, I initially define it as "my-data.csv". When trying to update it with data from an axios request, I realize I may not fully understand how these react components w ...