I'm looking for a class that I can easily create new instances from and optionally assign properties using the constructor.
For instance:
class Person {
name: string;
age: number;
constructor(props: {name?: string, age?: number}) {
this.name = props?.name?? "";
this.age = props?.age?? 0;
}
}
const person1 = new Person({name:"Pete"})
Is there a more streamlined approach to achieve this?
If we define "elegant" as having a DRY syntax, then there is little room for improvement. The example below demonstrates how you can streamline the constructor body implementation by utilizing default parameters and a self-referential type modified by the Partial
class Person {
age: number;
name: string;
constructor({ age = 0, name = "" }: Partial<Person> = {}) {
this.age = age;
this.name = name;
}
}
console.log(new Person({ name: "Pete" })); // { age: 0, name: "Pete" }
console.log(new Person({ age: 155 })); // { age: 155, name: "" }
console.log(new Person({ age: 155, name: "Pete" })); // { age: 155, name: "Pete" }
console.log(new Person({})); // { age: 0, name: "" }
console.log(new Person()); // { age: 0, name: "" }
TypeScript also offers parameter properties. However, this concept does not apply to the given example because the single constructor parameter is an object type, which cannot be assigned to any members of the class itself. By restructuring the class constructor to use ordered parameters for each field (instead of an object parameter), you could make use of this syntax pattern.
Previously, I utilized TypeScript internal modules and included numerous script tags to initialize my app. Now, I am in the process of transitioning the project to utilize external modules (using browserify), but I have hit a roadblock when it comes to con ...
When it comes to enums, ES6 symbols provide a great solution for avoiding collisions. Initially, I assumed that TypeScript's enum type used Symbols for enums if the target was set to 'es6', but it turns out it doesn't: enum Role {Emplo ...
There are 5 fields available for users to fill out on this form: Leave Code, From Date, Input Time1, To Date, and Input Time2. These variables are declared as a dates object in the .ts file, as shown below. interface Supervisor { name: string; code: s ...
Can anyone help me extract the value "Yes, I am a Speaker" from this code using Javascript DOM element with getElementById? The challenge is that the value is nested inside a list element without any specific attributes. Each block of code has a unique l ...
As I work on developing an npm package with options for both local and global (-g) installations, I find myself puzzled by the distinctions between the src and lib directories and the purpose of the bin directory. In my previous projects, I typically util ...
I'm currently grappling with coding a recursive function, specifically one that involves "Tree Recursion". I could really use some guidance to steer me in the right direction. To better explain my dilemma, let's consider a basic example showcasi ...
My goal is to construct an accordion containing several textfield mui-components. I have developed a unique render function incorporating all the essential tags and syntax for creating a text field component. Now, I am looking to generate an array of text ...
I am currently facing an unusual issue in Angular and Ionic 2 related to a specific provider I have set up. Here is the code snippet: getTransportations = function (category, maxResults) { let url = `${this.domain}/wp-json/gf/v2/forms/1/entries? ...
I am currently working on developing a tabs application using React and Typescript. The main component, Tabs, manages the state and passes it down to the Content component. Additionally, I have implemented a function called 'handleName' which is ...
I am facing a challenge with packaging a TypeScript class as part of an Angular module for exporting it as a library using ng-packagr. For instance, here is my class definition - export class Params { language: string ; country: string ; var ...
I've noticed this particular error popping up frequently online, but it's not quite matching the issue I'm facing. Every time I execute yarn dev, I encounter the following error: next-dev.js?53bc:89 Error was not caught TypeError: Cannot re ...
Is it possible to utilize custom variants in MUI v5? I am having trouble using a custom variant according to their documentation: https://mui.com/material-ui/customization/theme-components/#creating-new-component-variants declare module "@mui/material ...
Every time I attempt to run any code, I encounter the following error message: No HTTP methods exported in 'file path'. Export a named export for each HTTP method. Below is the content of my route.ts file: import type { NextApiRequest, NextApi ...
I am currently using parcel to process typescript for a web extension. I have installed JQuery and its type definitions via npm. In my typescript file, I have the following at the top: import $ from "jquery"; import "bootstrap"; However, when running run ...
Upon pressing the enter key, the editor automatically inserts paragraph and page break elements. What are some strategies to avoid these unwanted elements in the editor? ...
I attempted to construct a database schema involving users, groups, documents, and permissions. Users can be part of multiple groups Groups can have multiple users Users can possess permissions for documents Groups can have permissions for documents Perm ...
I'm currently attempting to learn from the Apollo GraphQL tutorial but I've hit a roadblock while trying to set up the Apollo Client. Upon executing npm run codegen, which resolves to apollo client:codegen --target typescript --watch, I encounter ...
Is it possible to mandate the keys of an interface to come from an array of strings: For instance, consider the following array: const myArray = ['key1', 'key2']; I aim to define a new interface named MyInterface that would require al ...
I tried implementing a login feature using web API with Angular 7, but encountered an error when using <form [formGroup]="loginForm" (submit)="loginFormSubmit()">. What could be causing this issue? login.component.html <form [formGroup]="loginFo ...
I currently have the following arrow function within my Angular project: this.httpClient.get('url').subscribe((response)=>{ }); It is important to note that ESLint should detect an error in the above code due to not specifying a return type. ...