Can Typescript support a structure similar to this?
class Currency {
last_updated: number;
constructor(public { id: string, name: string }) {}
}
So that the class Currency can accept an object with properties like id: string, name: string and automatically assign them as public attributes of the class instance.
A commonly used approach is as follows:
initialize({ gecko_id: string, symbol: string }) {
return Object.assign(this, { gecko_id, symbol });
}
If you're looking for a function that can transform any object by adding a new field named last_updated of type number, then this solution might help.
interface UpdatedObject<T> {
last_updated: number;
[key: string]: T;
}
function addLastUpdatedField<T>(obj: T): UpdatedObject<T> {
return { last_updated: 0, ...obj };
}
There are a couple of ways to approach this:
First option is for the caller to retrieve the values from the object and then pass them as parameters.
class Currency {
last_updated: number;
constructor(public id: string, public code: string) {}
}
Alternatively, the second option involves performing the necessary steps inside the constructor:
interface Data {
id: string;
code: string;
}
class Currency {
last_updated: number;
id: string;
code: string;
constructor(data: Data) {
this.id = data.id;
this.code = data.code;
}
}
I attempted to switch from angular 7 back to angular 6 by executing the following npm commands: npm uninstall -g angular-cli npm cache clean npm install -g <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="32535c55475e53401f515e5 ...
Is there a way to ensure that the fieldName is always inside the control? Passing a field name that doesn't exist in the form causes issues for me, so I'm looking for a solution. Can anyone help? import { Control, Controller } from 'react-ho ...
Recently, I made the switch to Angular 6.0. However, in VS Code, all jasmine functions are being highlighted as unknown even though they work fine and the tests run successfully. How can I make intellisense recognize Jasmine? In previous versions, a worka ...
I want to develop a single-page landing page where users can upload videos and there's a file size limit check before the upload. In my src/app/page.tsx file, I have the following code: import React from 'react'; import FileUpload from &apo ...
Seeking assistance from anyone! I've been grappling with a problem and can't seem to figure out a solution. Here's the scenario: My current setup involves a sidebar and a top bar for navigation in React. Check out my app so far in this imag ...
Currently, I am working on the models section of my application and considering switching from using number to bigint for id types. However, despite knowing that this is supported from TSC 3.2.x, WebStorm is indicating an error with Unresolved type bigint. ...
I recently received feedback during a code review suggesting that I add return type values to my functions. However, I am unsure of what return type to assign to this particular function: function mysteryTypeFunction(): mysteryType { return function() ...
export enum MyEnum{ Option1, Option2, Option3 } string selection = 'Option1'; MyEnum[selection] results in an error: The type string cannot be assigned to the type MyEnum On the other hand: MyEnum['Option1'] works as ...
I am encountering a problem with nextjs/reactjs. I have two tsx files: index.tsx and customAlert.tsx. The issue that I am facing is that the alert does not change color even though the CSS classes are being added to the alert HTML element. Tailwind is my c ...
Can someone help me figure out how to use the patchValue method in the ngOnInit() function? I'm trying to populate a HTML select dropdown with a value from a link, but it's not working as expected. Note: onTest() works perfectly when called sepa ...
Looking to develop a versatile function that can handle async functions, execute them, and catch any errors that may arise. Coming from a javascript background, I initially managed to create a function that did just this. However, my attempt to enhance it ...
I've attempted to log back in using the stored credentials, however it's not working despite trying everything. The dispatch function is functioning properly with the form, but not when accessing localStorage. App.tsx : useEffect(() => { ...
In my component, I have a subscription to triggerRuleExecutionService which is triggered by another component using next(). Within the pipe, I am using switchMap to make an HTTP service call and retrieve data from the database. this.ruleExecutionService ...
I am currently facing an issue with a function that resembles the one provided below (I have created a simplified example for discussion purposes): interface Variable { someMethod: () => void } const validateVariable(variable: Variable | undefined) { ...
I have a good understanding of ReactJS, but this topic seems to be more advanced. I am working with generics in TypeScript and have the following code: export const withPopover = <T,>(WrappedComponent: React.ComponentType<T>) => { const ...
I am currently working on implementing the following workflow Create a chart using the Highcharts Editor tool Export the JSON object from the Editor that represents the chart Utilize the exported JSON to render a new chart After creating a chart through ...
Could you provide guidance on how to convert json data into a pdf file without using any library? Here's an example of the json data I'd like to convert; {"employees":[ {"firstName":"John", "lastName":& ...
As a newcomer to TypeScript, I've noticed a discrepancy between keyof any and string | number | symbol in MappedType. However, I'm unclear on the exact distinction between these two syntaxes. type T = keyof any; //string | number | symbol type T ...
I received a response from the API called res. The response is in the following format: {"plan":[{"name":"ABC"},{"name":"DEF"}]}. I am attempting to save this response in my TypeScript code as shown below: ...
I successfully implemented a cal-heatmap instance in my Angular 2 (angular-cli) project locally, but when I deployed the project to Heroku, I encountered some errors that prevent the cal-heatmap from displaying. https://i.stack.imgur.com/8gY90.png The er ...