using any class as a function parameter in TypeScript

Question

using any class as a function parameter in TypeScript

Looking for advice: I am new to TypeScript and have classes defined like the ones below:

export declare class SampleOne extends Setting {
    getValue(): Promise<boolean>;
    setValue(value: boolean): Promise<void>;
}

And

export declare class SampleTwo extends Setting {
    getValue(): Promise<boolean>;
    setValue(value: boolean): Promise<void>;
}

Now I want a helper function where I can pass either SampleOne or SampleTwo as follows:

async function getObj(title: string, categories: string, cname: Setting) {

    let obj = await et.findSetting(title,categories) as cname;// I want to be able to pass either **SammpleOne** or **SampleTwo** class.
    return obj;
}

The function call would be:

getObj(title, categories, SampleOne)

getObj(title, categories, SampleTwo)

I am struggling to create this helper function. What should it look like in TypeScript?

Thank you in advance.

javascript typescript

Answer 1

Answer №1

To create a generic version of the function getObj, you can specify the type Setting and use the last argument as a constructor for type T:

type Class<T> = new (...args: any) => T;

async function getGenericObj<T extends Setting>(
    title: string, categories: string, klass: Class<T>): Promise<T> 
{
    return .... as  T
}

Answer 2

To create a generic version of the function getObj, you can specify the type Setting and use the last argument as a constructor for type T:

type Class<T> = new (...args: any) => T;

async function getGenericObj<T extends Setting>(
    title: string, categories: string, klass: Class<T>): Promise<T> 
{
    return .... as  T
}

Answer 3

Answer №2

I think the solution lies in applying the constraint T extends typeof Setting to the generic:

class Setting {
    getValue(): Promise<boolean> { return Promise.resolve(true) };
    setValue(value: boolean): Promise<void> { return Promise.resolve() };
}


class SampleOne extends Setting {
    getValue(): Promise<boolean> { return Promise.resolve(true) };
    setValue(value: boolean): Promise<void> { return Promise.resolve() };
}

class SampleTwo extends Setting {
    getValue(): Promise<boolean> { return Promise.resolve(true) };
    setValue(value: boolean): Promise<void> { return Promise.resolve() };
}

class DontAllowed { }

type AllowedClasses = typeof SampleOne | typeof SampleTwo

class SampleThree { // does not extends Setting
    getValue(): Promise<boolean> { return Promise.resolve(true) };
    setValue(value: boolean): Promise<void> { return Promise.resolve() };
}

function getObj<T extends typeof Setting>(cname: T) {
    return cname
}

const result = getObj(SampleOne) // ok
const result2 = getObj(SampleTwo) // ok
const result3 = getObj(DontAllowed) // expected error

In the example above, it is assumed that every class extending Setting is allowed. If you only want to allow two specific classes, you can modify it like this:


type AllowedClasses = typeof SampleOne | typeof SampleTwo

function getObj<T extends AllowedClasses>(cname: T) {
    return cname
}

Playground

I personally believe that using type assertion (as operator) in such scenarios may not be necessary.

Answer 4

I think the solution lies in applying the constraint T extends typeof Setting to the generic:

class Setting {
    getValue(): Promise<boolean> { return Promise.resolve(true) };
    setValue(value: boolean): Promise<void> { return Promise.resolve() };
}


class SampleOne extends Setting {
    getValue(): Promise<boolean> { return Promise.resolve(true) };
    setValue(value: boolean): Promise<void> { return Promise.resolve() };
}

class SampleTwo extends Setting {
    getValue(): Promise<boolean> { return Promise.resolve(true) };
    setValue(value: boolean): Promise<void> { return Promise.resolve() };
}

class DontAllowed { }

type AllowedClasses = typeof SampleOne | typeof SampleTwo

class SampleThree { // does not extends Setting
    getValue(): Promise<boolean> { return Promise.resolve(true) };
    setValue(value: boolean): Promise<void> { return Promise.resolve() };
}

function getObj<T extends typeof Setting>(cname: T) {
    return cname
}

const result = getObj(SampleOne) // ok
const result2 = getObj(SampleTwo) // ok
const result3 = getObj(DontAllowed) // expected error

In the example above, it is assumed that every class extending Setting is allowed. If you only want to allow two specific classes, you can modify it like this:


type AllowedClasses = typeof SampleOne | typeof SampleTwo

function getObj<T extends AllowedClasses>(cname: T) {
    return cname
}

Playground

I personally believe that using type assertion (as operator) in such scenarios may not be necessary.

Answer 5

Answer №3

I personally prefer the Convenience generic design pattern

async function getObj<T extends Setting>(title: string, categories: string): Promise<T> {
    let obj = await et.findSetting(title,categories) as T;
    return obj;
}

Alternatively, you could simplify it by removing the unnecessary async keyword:

function getObj<T extends Setting>(title: string, categories: string): Promise<T> {
    return et.findSetting(title,categories) as Promise<T>;
}

Example of how to use this function:

const s1 = getObj<SampleOne>('a', 'b');

Advantages:

Can be utilized if Setting is modeled as a class
Can also be used if Setting is modeled as an interface

Disadvantages:

No runtime check included (which may or may not be an issue)

If runtime checking is needed and settings are represented as classes, you can consider using the Type approach inspired by Angular:

interface Type<T> extends Function { new (...args: any[]): T; }

async function getObj<T extends Setting>(
    title: string, categories: string, klass: Type<T>): Promise<T> 
{
   let obj = await et.findSetting(title,categories);
   if (klass.prototype.isPrototypeOf(obj)) {
    return obj as T; 
   } else {
     throw new Error(`Expected ${klass.name} but got ${obj.constructor.name}`)
   }
   
}

const s1 = getObj('a', 'b', SampleOne);
s1.then(x => console.log(x))
  .catch(e => console.log(e));

Answer 6

I personally prefer the Convenience generic design pattern

async function getObj<T extends Setting>(title: string, categories: string): Promise<T> {
    let obj = await et.findSetting(title,categories) as T;
    return obj;
}

Alternatively, you could simplify it by removing the unnecessary async keyword:

function getObj<T extends Setting>(title: string, categories: string): Promise<T> {
    return et.findSetting(title,categories) as Promise<T>;
}

Example of how to use this function:

const s1 = getObj<SampleOne>('a', 'b');

Advantages:

Can be utilized if Setting is modeled as a class
Can also be used if Setting is modeled as an interface

Disadvantages:

No runtime check included (which may or may not be an issue)

If runtime checking is needed and settings are represented as classes, you can consider using the Type approach inspired by Angular:

interface Type<T> extends Function { new (...args: any[]): T; }

async function getObj<T extends Setting>(
    title: string, categories: string, klass: Type<T>): Promise<T> 
{
   let obj = await et.findSetting(title,categories);
   if (klass.prototype.isPrototypeOf(obj)) {
    return obj as T; 
   } else {
     throw new Error(`Expected ${klass.name} but got ${obj.constructor.name}`)
   }
   
}

const s1 = getObj('a', 'b', SampleOne);
s1.then(x => console.log(x))
  .catch(e => console.log(e));

Answer 7

Answer №4

Utilize generics for enhanced functionality.

async function fetchItem<T>(name: string, category: string) {

    let item = await retrieveData(name, category) as T;
    return item;
}

You can then invoke the function with the specific type you want:

fetchItem<SampleOne>('example', 'typeA');
fetchItem<SampleTwo>('sample', 'typeB');

Answer 8

Utilize generics for enhanced functionality.

async function fetchItem<T>(name: string, category: string) {

    let item = await retrieveData(name, category) as T;
    return item;
}

You can then invoke the function with the specific type you want:

fetchItem<SampleOne>('example', 'typeA');
fetchItem<SampleTwo>('sample', 'typeB');

using any class as a function parameter in TypeScript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Storing and Retrieving Mongoose Data Using Nested Schemas, References, and Promise Functions

Iterate over a series of button elements within a loop in order to dynamically control corresponding input fields

Disabling form submission when pressing the enter key

What is the best way to transfer data between functions prior to serializing and submitting the form?

Send information to the next route using Vue

Exploring the power of Vue element manipulation

React: Oops! Looks like there's an issue - this.props.update is not defined as

Can TypeScript types be created using multiple comma-separated strings?

Obtain a union type using the `keyof typeof` syntax

javascript alter css property display to either visible or hidden

Issue with SignalR client functionality following update to .NET Core 3.1版本

Angular JWT token validation error

I would like a div element to slide up from the bottom of the page

What is the best way to ensure that a task is performed only once the DOM has finished loading following an AJAX request

Button for PayPal Checkout

Oops! The program encountered an issue on the production environment, but it's running smoothly

What is the reason I am unable to upload personalized templates using <script> elements?

Confusion surrounding asynchronous functions in Node.js

iPhone App Freezes when trying to download a file through Phonegap

Tips for locating the :before element's position with Javascript