Using typescript, we can pass a generic class as a parameter to a function

Question

Using typescript, we can pass a generic class as a parameter to a function

Currently, I am faced with the challenge of passing a class reference as a function parameter, and then calling a static method on this particular class. Additionally, there is a possibility that in the future, I may need to instantiate the class and include a constructor as an example.

My current implementation works but lacks typings:

class Messages {
    getMessage(classRef: any): any {
       return classRef.getMessage()
     }
}

class myClassA {
    constructor(public id: number, public message: string) {}
    static getMessage(): string {
        return 'hello from class A';
    }
}

class myClassB {
    constructor(public id: number, public message: string) {}
    static getMessage(): string {
        return 'hello from class B';
    }
}

var messages = new Messages();
var messageA = messages.getMessage(myClassA);
var messageB = messages.getMessage(myClassB);

console.log(messageA) // 'hello from class A'
console.log(messageB) // 'hello from class B'

I have attempted to type the class reference using generics, but I am confused about the correct approach. My attempt with

getMessage<C>(classRef: {new(): C;}): any {}...

did not yield the desired results.

If anyone could provide guidance on how to properly pass a class reference, it would be greatly appreciated.

typescript typescript2.0

Answer 1

Answer №1

Typically, when referencing classes in typescript, you need to use their constructor type. However, with the introduction of typescript 2.8, there is now a new InstanceType<T> type in the standard library that allows for extracting the instance type from the constructor type, providing the desired type safety.

To enhance your code snippet, you can specify types as follows:

class Messages {
    getMessage<T extends {getMessage: () => string, new (...args: any[]): InstanceType<T>}>(classRef: T): string {
       // Here, classRef is correctly inferred to have a `getMessage` method.
       return classRef.getMessage()
    }
}

class myClassA {
    constructor(public id: number, public message: string) {}
    static getMessage(): string {
        return 'hello from class A';
    }
}

class myClassB {
    constructor(public id: number, public message: string) {}
    static getMessage(): string {
        return 'hello from class B';
    }
}

var messages = new Messages();

// messageA and messageB are inferred to have type: string
// You can change it back to any if needed.

// Both myClassA and myClassB can be assigned as arguments to
// getMessage without any issues.
var messageA = messages.getMessage(myClassA);
var messageB = messages.getMessage(myClassB);

console.log(messageA) // 'hello from class A'
console.log(messageB) // 'hello from class B'

The line:

getMessage<T extends {getMessage: () => string, new (...args: any[]): InstanceType<T>}>(classRef: T): string {

is where the type safety originates. This syntax specifies that whatever T is, it must have a method getMessage (if T is a class constructor, then getMessage needs to be a static method), and the

new (...args: any[]): InstanceType<T>

indicates that T should be a class constructor.

In this implementation, I've left the constructor arguments open to anything, but if the constructor always expects specific arguments, you can further refine that. For example,

new (id: number, message: string): InstanceType<T>

would be suitable for your scenario.

If you do not have access to typescript 2.8, you can still achieve type safety by defining T as the instance type and setting the parameter type to a wrapped type that uses T as its parameter like so:

interface Messageable<T> {
    new(...args: any[]): T;
    getMessage(): string;
}

class Messages {
    getMessage<T>(classRef: Messageable<T>): string {
       return classRef.getMessage()
    }
}

This approach should work just fine for your requirements.

Answer 2

Typically, when referencing classes in typescript, you need to use their constructor type. However, with the introduction of typescript 2.8, there is now a new InstanceType<T> type in the standard library that allows for extracting the instance type from the constructor type, providing the desired type safety.

To enhance your code snippet, you can specify types as follows:

class Messages {
    getMessage<T extends {getMessage: () => string, new (...args: any[]): InstanceType<T>}>(classRef: T): string {
       // Here, classRef is correctly inferred to have a `getMessage` method.
       return classRef.getMessage()
    }
}

class myClassA {
    constructor(public id: number, public message: string) {}
    static getMessage(): string {
        return 'hello from class A';
    }
}

class myClassB {
    constructor(public id: number, public message: string) {}
    static getMessage(): string {
        return 'hello from class B';
    }
}

var messages = new Messages();

// messageA and messageB are inferred to have type: string
// You can change it back to any if needed.

// Both myClassA and myClassB can be assigned as arguments to
// getMessage without any issues.
var messageA = messages.getMessage(myClassA);
var messageB = messages.getMessage(myClassB);

console.log(messageA) // 'hello from class A'
console.log(messageB) // 'hello from class B'

The line:

getMessage<T extends {getMessage: () => string, new (...args: any[]): InstanceType<T>}>(classRef: T): string {

is where the type safety originates. This syntax specifies that whatever T is, it must have a method getMessage (if T is a class constructor, then getMessage needs to be a static method), and the

new (...args: any[]): InstanceType<T>

indicates that T should be a class constructor.

In this implementation, I've left the constructor arguments open to anything, but if the constructor always expects specific arguments, you can further refine that. For example,

new (id: number, message: string): InstanceType<T>

would be suitable for your scenario.

If you do not have access to typescript 2.8, you can still achieve type safety by defining T as the instance type and setting the parameter type to a wrapped type that uses T as its parameter like so:

interface Messageable<T> {
    new(...args: any[]): T;
    getMessage(): string;
}

class Messages {
    getMessage<T>(classRef: Messageable<T>): string {
       return classRef.getMessage()
    }
}

This approach should work just fine for your requirements.

Using typescript, we can pass a generic class as a parameter to a function

Answer №1

Similar questions

The debate between using "this" versus "classname" to access static elements in

Providing the type for an abstract class implementation: A guide

In the event that you encounter various version formats during your work

Exploring disparities between the Client SDK and Admin SDK in conducting firestore queries

What is the process for specifying a data type for a pre-existing npm package module?

Steps for generating an instance of a concrete class using a static method within an abstract class

Having trouble getting the onClick function to work in your Next.js/React component?

How can I dynamically generate multiple Reactive Forms from an array of names using ngFor in Angular?

The argument labeled as 'State' cannot be assigned to a parameter labeled as 'never'

The incredible power of the MongoDB $inc field

Issue encountered while attempting to utilize the useRef function on a webpage

Changing dates in JavaScript / TypeScript can result in inaccurate dates being displayed after adding days

Exploring the functionality of window.matchmedia in React while incorporating Typescript

The feature of Nuxt 3's tsconfig path seems to be malfunctioning when accessed from the

Developing an Angular 11 Web API Controller with a POST Method

Mocking Firestore v9 getDocs() in Jest: A Comprehensive Guide

React-snap causing trouble with Firebase

The API functions seamlessly with TypeScript, however, during the transpilation process, it fails to locate the model

Obtain Value from Function Parameter

Leveraging a component as a property of an object in Vue version 3