Using Typescript generics within a callback function

Question

Using Typescript generics within a callback function

I am currently working on developing a versatile service that can fetch data from a remote source and create objects based on that data.

@Injectable()
export class tService<T> {
    private _data: BehaviorSubject<T[]> = new BehaviorSubject([]);
    private url = '...url...';  // URL to web api

    constructor(private http: HttpClient) {    
        this.http.get<T[]>(this.url).subscribe(theThings => {
            theThings = _.map(theThings, (theThing) => new T(theThing));
            this._data.next(theThings);
        });
    }
}

Encountering an error

T only refers to type, but is being used as a value here

. I’m aware of what’s happening and have seen similar inquiries before.

For instance:

How to create a new object from type parameter in generic class in typescript?
TypeScript return object constructed form generic
Get constructor/instance from generic type in TypeScript

All solutions I’ve found either involve hardcoding the class at some point or integrating T's class constructor somewhere. However, I am stuck because the class that needs instantiation has parameters in its constructor, and I'm utilizing Angular's DI system, preventing me from adding parameters to the service's constructor.

constructor(private playersService: gService<Player>, private alliesService: gService<Ally>) { }

If anyone has any insights on how to proceed, it would be greatly appreciated. Ideally, I would prefer a solution that doesn't resort to a mere "hack". If the options are between something convoluted and duplicating the service with slight modifications, I’d opt for the latter.

angular typescript generics

Answer 1

Answer №1

When it comes to class names, it's important to note that they refer not only to the type of the class but also to its constructor. This is why you can use both let x: ClassName and new ClasName(). On the other hand, a generic parameter is solely a type, similar to an interface, which is why using it as a value causes the compiler to throw an error (since a constructor function is expected). To resolve this issue, you need to pass an additional parameter specifying the constructor for T:

export class tService<T> {
    private _data: BehaviorSubject<T[]> = new BehaviorSubject<T>([]);
    private url = '...url...';  // URL to web api

    constructor(private http: HttpClient, ctor: new (data: Partial<T>)=> T) {    
        this.http.get<T[]>(this.url).subscribe(theThings => {
            theThings = _.map(theThings, (theThing) => new ctor(theThing));
            this._data.next(theThings);
        });
    }
}
//Usage
class MyClass {
    constructor(p: Partial<MyClass>) {
        // ...
    }
}
new tService(http, MyClass)

Note The parameters to the constructor signature may vary according to your use case.

Edit

You mention that you can't add arguments to the constructor. Generics (and all types in general) are erased at runtime, making it impossible to rely on T at runtime. Thus, someone will need to pass in the class constructor. One approach is to create dedicated classes for each instance of T and inject the specific class:

class tServiceForMyClass extends tService<MyClass> {
    constructor(http: HttpClient)  {
        super(http, MyClass)
    }
}

Alternatively, you could perform your operations based on the constructor by implementing an init method that takes the constructor as a parameter:

export class tService<T> {
    private _data: BehaviorSubject<T[]> = new BehaviorSubject<T>();
    private url = '...url...';  // URL to web api

    constructor(private http: HttpClient){}
    init(ctor: new (data: Partial<T>)=> T) {    
        this.http.get<T[]>(this.url).subscribe(theThings => {
            theThings = _.map(theThings, (theThing) => new ctor(theThing));
            this._data.next(theThings);
        });
    }
}

Answer 2

When it comes to class names, it's important to note that they refer not only to the type of the class but also to its constructor. This is why you can use both let x: ClassName and new ClasName(). On the other hand, a generic parameter is solely a type, similar to an interface, which is why using it as a value causes the compiler to throw an error (since a constructor function is expected). To resolve this issue, you need to pass an additional parameter specifying the constructor for T:

export class tService<T> {
    private _data: BehaviorSubject<T[]> = new BehaviorSubject<T>([]);
    private url = '...url...';  // URL to web api

    constructor(private http: HttpClient, ctor: new (data: Partial<T>)=> T) {    
        this.http.get<T[]>(this.url).subscribe(theThings => {
            theThings = _.map(theThings, (theThing) => new ctor(theThing));
            this._data.next(theThings);
        });
    }
}
//Usage
class MyClass {
    constructor(p: Partial<MyClass>) {
        // ...
    }
}
new tService(http, MyClass)

Note The parameters to the constructor signature may vary according to your use case.

Edit

You mention that you can't add arguments to the constructor. Generics (and all types in general) are erased at runtime, making it impossible to rely on T at runtime. Thus, someone will need to pass in the class constructor. One approach is to create dedicated classes for each instance of T and inject the specific class:

class tServiceForMyClass extends tService<MyClass> {
    constructor(http: HttpClient)  {
        super(http, MyClass)
    }
}

Alternatively, you could perform your operations based on the constructor by implementing an init method that takes the constructor as a parameter:

export class tService<T> {
    private _data: BehaviorSubject<T[]> = new BehaviorSubject<T>();
    private url = '...url...';  // URL to web api

    constructor(private http: HttpClient){}
    init(ctor: new (data: Partial<T>)=> T) {    
        this.http.get<T[]>(this.url).subscribe(theThings => {
            theThings = _.map(theThings, (theThing) => new ctor(theThing));
            this._data.next(theThings);
        });
    }
}

Using Typescript generics within a callback function

Answer №1

Similar questions

I find it frustrating that Angular consistently redirects me to the login page every time I attempt to navigate to a different page

The lazy-loaded Angular module encountered an issue when attempting to access its child routes

Tips for troubleshooting a React Native project built with Expo and utilizing TypeScript

List of nested objects converted into a flat array of objects

The overlay pop-up does not reposition on scroll movements

The Angular router-outlet is refusing to display any content

Is there an automatic bottom padding feature?

Adjust the design of your Angular 2/5 app based on configuration file dynamically

How to Invoke a TypeScript Function in Angular 2 Using jQuery

Error: Uncaught TypeError in AuthContext in Next.js 13.0.6 when using TypeScript and Firebase integration

What is the way to send custom properties to TypeScript in combination with StyledComponents?

Create a variable and save data into it

Additional optional class name within a TypeScript component

Swapping the content of the API response with Angular 11 in the HTML

A guide on streamlining the process of generating "this." variables within Angular

Guide on obtaining the total value from a JSON Array in Angular 2 using TypeScript

Transferring information between two components remains intact even after refreshing the page

Is it possible for an uninitialized field of a non-null literal string type to remain undefined even with strict null checks in

Looking to retrieve the selected item from the list using console.log

Tips for ensuring that the code inside a subscribe block completes before moving on to the next iteration within a forEach loop in Angular