Tips for neatly wrapping a class constructor

Currently, I am experimenting with code to create a more streamlined Angular Dialog initializer. This initializer should be passed a constructor function along with its arguments in a type-safe manner. The current implementation works, but it is

  • challenging
  • less safe than desired
class SomeDialogClass {
    name: string;
    nachname: string;
    id: number;

    constructor(name: string, nachname: string, id: number) {
        this.name = name;
        this.nachname = nachname;
        this.id = id;
    }
}

// type Constructor = new (...args: unknown[]) => unknown; // <- breaks
type Constructor = new (...args: any[]) => any; // <- This is not ideal. Is there no utility type for "Constructor"?

function createDialog<DialogClass extends Constructor>(classConstructor: DialogClass, ...args: ConstructorParameters<DialogClass>): InstanceType<DialogClass> {
    // everything within this function is uncertain due to the use of "any" in Constructor type
    return new classConstructor(...args);
}

const instance = createDialog(SomeDialogClass, "John", "Doe", 7);

console.log(instance);

Playground

Is there a more elegant solution to achieve this functionality?

Answer №1

When designing the function to be generic, it is more effective to define the constructor type as T and then extract the argument and instance types using the ConstructorParameters<T> and InstanceType<T> utility types. However, this approach can lead to complications for the compiler as conditional types involving generic parameters may not be fully comprehended. The compiler defers evaluation in such cases, making it challenging to validate the code's accuracy.

Instead, a simpler method for the compiler to understand is by making the function generic directly in the argument list with type A and instance type I:

function createDialog<A extends unknown[], I>(
    classConstructor: new (...args: A) => I,
    ...args: A
): I {
    return new classConstructor(...args);
}

This approach remains functional from the caller's perspective:

const instance = createDialog(
    SomeDialogClass, "John", "Doe", 7
);
// const instance: SomeDialogClass    

Link to Playground for Code Execution

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using React Material UI in Typescript to enhance the theme with custom properties

Struggling to customize the default interface of material ui Theme by adding a custom background property to palette. Fortunately, I found the solution thanks to this helpful shared by deewens. declare module '@material-ui/core/styles/createPalette& ...

Webclipse is having trouble locating a module, despite the fact that Angular CLI is able to

I am facing an issue with my project structure src | +--app | +--components | | | +-component.ts | +--entities | +--entity.ts In entity.ts, I have export class Entity { ... In component.ts, there is an import statement ...

What is causing the issue of URL parameters becoming undefined when performing service injection in the app component?

When working with a service that reads parameters from the URL, everything seems to be functioning properly until attempting to inject the service into the constructor of the app.component.ts file or trying to call a service method from the app.component.t ...

Is it possible to verify type equality in Typescript?

If the types do not match, I want to receive an error. Here is an example of an object: const ACTIVITY_ATTRIBUTES = { onsite: { id: "applied", .... }, online: { id: "applied_online", .... }, ... } as co ...

Tips for iterating over an array that implements either of two interfaces in TypeScript

The objective is to develop a reusable method for filtering out items from an array that implements one of two interfaces Providing a code example would be most helpful: interface IDuration { start: number; end: number; } interface IRelativeDuration ...

The 'cookies' property is not found on the 'Request' type

Currently, I am attempting to access a cookie within a NestJS controller. I have been referencing the documentation found at https://docs.nestjs.com/techniques/cookies#use-with-express-default Below is my implementation: import { Controller, Get, Render, ...

What is the best way to create unit tests for a React component using TypeScript?

I recently completed a small React project using TypeScript and decided to have it print numbers of li tags in the browser. During this process, I wanted to write unit tests that would test if the component created the HTML element . However, as someone ...

Having trouble with ESLint in VSCode? The ESLint extension seems to be ignoring linting rules after starting a new project within VSCode

I recently started using the ESLint extension in my VSCode editor for my React project. After creating the starter files, I ran the following command in my terminal: eslint --init This allowed me to choose the AirBnb style guide with React, which generat ...

Observable - initiating conditional emission

How can I make sure that values are emitted conditionally from an observable? Specifically, in my scenario, subscribers of the .asObservable() function should only receive a value after the CurrentUser has been initialized. export class CurrentUser { ...

having difficulty interpreting the information from angular's httpclient json request

After creating an Angular function in typescript to make an http request for JSON data and save it to an object, I noticed that the function requires two clicks of the associated button to work properly. Although the connection and data parsing are success ...

The ngAfterViewChecked function seems to be caught in an endless loop

I am facing an issue where the <cdk-virtual-scroll-viewport> starts from the bottom, but I am unable to scroll up. I suspect that this problem is related to the use of AfterViewChecked. Even after trying AfterViewInit, the issue persists. @ViewChil ...

The module ~/assets/images/flags/undefined.png could not be found in the directory

When I use the img tag with a dynamic address filled using require, it works well in the component. However, when I try to write a test for it, an error is thrown. console.error Error: Configuration error: Could not locate module ~/assets/ima ...

The system is unable to locate a supporting entity with the identifier '[object Object]', as it is classified as an 'object'

I'm currently working on an Angular 2 application where I am retrieving data from an API and receiving JSON in the following format. { "makes": null, "models": null, "trims": null, "years": null, "assetTypes": { "2": "Auto ...

imported classes from a module cannot be accessed within the same module

Here is some TypeScript code that I wrote: Within my module, I am importing a library called ts-events. import {SyncEvent} from 'ts-events' module MyModule{ export class MyService{ } } In the same module but in a different file, I'm ...

Problem with Typescript: The type '{ x;y }' is required to have a '[Symbol.iterator]()' method

Just starting out with Typescript and tackling the task of converting a React project from JavaScript to TypeScript. I've been diving into various posts for guidance, but I feel like I'm going in circles. Any assistance would be greatly appreci ...

react state change not triggering re-render of paragraph

I recently started learning react and web development. To streamline my work, I've been using ChatGPT, but I'm facing an issue that I can't seem to solve. I'm trying to fetch movie descriptions from the TMDB API using movie IDs, but des ...

Step-by-step guide on integrating a custom JS file into an Angular component

Trying to grasp Angular, I embarked on adding some JavaScript logic to one of my components from a separate JS file. While following advice from a similar query (How to add custom js file to angular component like css file), it seems I missed something cru ...

Storing the state of DevExtreme DataGrid in Angular

Currently, I have integrated the DevExtreme DataGrid widget into my Angular application. Here is a snippet of how my DataGrid is configured: <dx-data-grid id="gridContainer" [dataSource]="employees" [allowColumnReordering]="true" [allo ...

Conceal the React button once it has been pressed

In my checklist of questions, I have set up a system where the first button is shown if any checkboxes are selected. If no checkbox is selected, then the second "Submit" button is displayed. Upon clicking submit, a message appears inside. Additionally, for ...

Interacting with a Web Socket Connection While Editing Inline Content Causes Distractions. Using Angular 9 Material Table

Not exactly an error-related inquiry, but more about behaviors. In my Angular 9 setup using RxJS and Material, I have a table connected to a web socket for updates triggered by blur or change, depending on the column. This setup works well, updating the ta ...