Tips for selecting specific types from a list using generic types in TypeScript

Question

Tips for selecting specific types from a list using generic types in TypeScript

Can anyone assist me in creating a function that retrieves all instances of a specified type from a list of candidates, each of which is derived from a shared parent class?

For example, I attempted the following code:


        class A {
            protected children: A[] = [];
        
            getChildrenOfType<T extends A>(): T[] {
                let result: T[] = [];
                for (let child of this.children) {
                    if (child instanceof T)
                        result.push(<T>child);
                }
            
                return result;
            }
        }

using classes like:


        class B: extends A {}
        class C: extends B {}
        class D: extends A {}

However, the code does not compile. The error message "'T' only refers to a type but is being used as a value here" appears when using child instanceof T. This issue seems to be related to the generic type. What is the correct approach to solve this problem? Do I need additional steps to filter objects based on generic types?

javascript typescript

Answer 1

Answer №1

Feel free to utilize the following code snippet.

class A {
    protected children: A[] = [];

    getChildrenOfType<T extends A>(t: new (...args: any[]) => T): T[] {
        let result: T[] = [];
        for (let child of this.children) {
            if (child instanceof t)
                result.push(<T>child);
        }

        return result;
    }
}

Make sure that the right side of the instanceof is a constructor function, such as new() => MyClass. You can pass that parameter to the method.

The getChildrenOfType function can be implemented in the following way:

var a = new A();
// Add some children to a.children
a.getChildrenOfType(B)

Test it out on the playground.

Answer 2

Feel free to utilize the following code snippet.

class A {
    protected children: A[] = [];

    getChildrenOfType<T extends A>(t: new (...args: any[]) => T): T[] {
        let result: T[] = [];
        for (let child of this.children) {
            if (child instanceof t)
                result.push(<T>child);
        }

        return result;
    }
}

Make sure that the right side of the instanceof is a constructor function, such as new() => MyClass. You can pass that parameter to the method.

The getChildrenOfType function can be implemented in the following way:

var a = new A();
// Add some children to a.children
a.getChildrenOfType(B)

Test it out on the playground.

Tips for selecting specific types from a list using generic types in TypeScript

Answer №1

Similar questions

A guide on implementing typescript modules within a Node.js environment

Using Angular BehaviorSubject in different routed components always results in null values when accessing with .getValue or .subscribe

Having trouble with your jQuery code not loading properly?

Add an array as a nested child within another array using node.js and JavaScript

Custom time selector does not automatically set the default value

Incorporating Entrance Animations for Individual Elements within ngView Using AngularJS

Store the link in a variable and retrieve its content into another variable

Encountering an issue in next js where attempting to access properties of an undefined variable is resulting in an error with the

Enhance your Sails.js model by incorporating a custom instance method as a new property

Attempting to retrieve data either by code or with a WHERE condition proves unsuccessful as the data retrieval process yields no results

What could be causing the lack of updates in my SolidJS component when the data changes?

The Parse-JS-SDK currently doesn't support using the objectId in the matchesKeyInQuery method

The webpage becomes unresponsive and gets stuck when sending a stream of requests to the web server via ajax

Exploring jQuery.each: A guide to navigating JSON objects

Why styled-components namespace problem in React Rollup build?

Ways to Insert Text and Values into an Array

Capable of retrieving response data, however, the label remains invisible in the dropdown menu

Extract data from an API endpoint using JavaScript or React

Chrome stack router outlet and the utilization of the Angular back button

Exploring the Possibilities with NodeJS and Socket.IO