Passing a generic type as a parameter in a generic class in TypeScript

Question

Passing a generic type as a parameter in a generic class in TypeScript

TypeScript: I have a method in the DataProvider class called getTableData:

public static getTableData<T extends DataObject>(type: { new(): T}): Array<T> { ... }

Everything works fine when I use it like this:

let speakers = DataProvider.getTableData(Speaker);  // where Speaker is a class

Now I want to invoke this from a generic Class:

export class ViewModelBase<T extends DataObject> {   
  public getData(): Array<T> {
    return <T[]> DataProvider.getTableData(T);
  }
}

But now I am facing a Cannot find name 'T' error for the T parameter I pass to getTableData. How should I call getTableData?

Update: Thanks to @Paleo's assistance, I came up with this solution:

export class ViewModelBase<T extends DataObject> {   

  constructor(private dataObjectClass: { new(): T}){}

  public getTableData(): Array<T> {
    return <T[]> DataProvider.getTableData<T>(this.dataObjectClass);
  }
}

Even though in:

class SpeakerViewModel extends ViewModelBase<Speaker> { ... }

I specified that it is a ViewModel for Speaker, I still need to instantiate the SpeakerViewModel like:

let vm = new SpeakerViewModel(Speaker);

It seems like I still don't fully grasp this concept.

generics typescript

Answer 1

Answer №1

Metadata in generics is limited; they are not applicable as function parameters. Perhaps consider using the following approach:

export class BaseViewModel<T extends Entity> {
  constructor(private EntityClass: {new(): T}) {
  }
  public fetchData(): Array<T> {
    return DataHandler.fetchData<T>(this.EntityClass);
  }
}

Answer 2

Metadata in generics is limited; they are not applicable as function parameters. Perhaps consider using the following approach:

export class BaseViewModel<T extends Entity> {
  constructor(private EntityClass: {new(): T}) {
  }
  public fetchData(): Array<T> {
    return DataHandler.fetchData<T>(this.EntityClass);
  }
}

Answer 3

Answer №2

Perhaps this explanation could be useful:

export abstract class BaseEntity {
  public static from<T extends BaseEntity>(c: new() => T, data: any): T {
    return Object.assign(new c(), data)
  }
  public static first<T extends BaseEntity>(c: new() => T, data) {
    if (data.rows.length > 0) {
      let item = data.rows.item(0);
      return BaseEntity.from(c, item);
    }
    return null;
  }

}

This base class is designed for extension, allowing methods to be called on either the base class or its subclasses.

For example:

return Product.first(Product, data);

Or:

return BaseEntity.first(Product, data);

Take note of how the from() method is utilized within the first() method.

Answer 4

Perhaps this explanation could be useful:

export abstract class BaseEntity {
  public static from<T extends BaseEntity>(c: new() => T, data: any): T {
    return Object.assign(new c(), data)
  }
  public static first<T extends BaseEntity>(c: new() => T, data) {
    if (data.rows.length > 0) {
      let item = data.rows.item(0);
      return BaseEntity.from(c, item);
    }
    return null;
  }

}

This base class is designed for extension, allowing methods to be called on either the base class or its subclasses.

For example:

return Product.first(Product, data);

Or:

return BaseEntity.first(Product, data);

Take note of how the from() method is utilized within the first() method.

Answer 5

Answer №3

Have you considered creating a base type and then extending it? By doing this, your function can accept the base type and you can call it with the extended type. For example:

export interface BaseData {
  key: object
}

After defining the base type:

import { BaseData } from 'baseDataFile'

export interface DerivedData extends BaseData {
  key: someObjectType
}

Now:

import { BaseData } from 'baseDataFile'

export const someFunc = (props: BaseData) => {
    // do something
    return result 
}

Finally:

import { DerivedData } from 'derivedDataFile'

const myData: DerivedData = something as DerivedData
const myNewData = someFunc(myData)

Answer 6

Have you considered creating a base type and then extending it? By doing this, your function can accept the base type and you can call it with the extended type. For example:

export interface BaseData {
  key: object
}

After defining the base type:

import { BaseData } from 'baseDataFile'

export interface DerivedData extends BaseData {
  key: someObjectType
}

Now:

import { BaseData } from 'baseDataFile'

export const someFunc = (props: BaseData) => {
    // do something
    return result 
}

Finally:

import { DerivedData } from 'derivedDataFile'

const myData: DerivedData = something as DerivedData
const myNewData = someFunc(myData)

Passing a generic type as a parameter in a generic class in TypeScript

Answer №1

Answer №2

Answer №3

Similar questions

Adjusting the date in Angular 8 by increasing or decreasing it in the dd-MM-yyyy layout with a button press

TS: How can we determine the type of the returned object based on the argument property?

Error occurs when using JSON.stringify with a Typescript array map

Combining Vue with Typescript and rollup for a powerful development stack

Arranging strings in descending order using Typescript

The quantity of elements remains constant in the EventEmitter

Error in React Typescript Order Form when recalculating on change

The error message "Property 'value' is not present on type 'EventTarget & HTMLSelectElement'" indicates that the 'value' property is not recognized on the Event

JavaScript: specify parameters for function inputs

Is it possible to obtain the return type of every function stored in an array?

AmplifyJS is throwing an error: TypeError - It seems like the property 'state' is undefined and cannot be read

Revamp the switch-case statement in JavaScript code

Seems like ngAfterViewInit isn't functioning properly, could it be an error on my end

Tips for showcasing saved images in Spring Boot with Angular 4

How can the panel within an accordion be enlarged or minimized?

The data type of the element is implicitly set to 'any' due to the fact that a 'string' expression cannot be used to reference the type '(controlName: string) => boolean'

Expand the font manually

What are the steps for encountering a duplicate property error in TypeScript?

Struggling to connect the array of objects from the .ts file with the template (.html) in Angular

Incorporating timed hover effects in React applications