How to retrieve an object of type T from a collection of classes that extend a common base type in Typescript

Question

How to retrieve an object of type T from a collection of classes that extend a common base type in Typescript

In my current project, I have a class named Foo that is responsible for holding a list of items. These items all inherit from a base type called IBar. The list can potentially have any number of items.

One challenge I am facing is creating a get method in the Foo class that specifically takes a generic type restricted to only those types that inherit from IBar.

As of now, the interfaces and classes I have defined are as follows:

interface IBar {
  bar: string;
}

interface IFizz extends IBar {
  buzz: string;
}

class Foo {

  get<T extends IBar>(): T {
    var item = this.list[0];
    return item;
  }

  list: Array<IBar>;
}

The code I am attempting to run is:

var foo = new Foo();
var item = foo.get<IFizz>();

Although I am aware that the list is currently empty, my main goal is to prevent the TypeScript compiler from displaying an error. The call to `foo.get` does not cause an error, the issue lies within the implementation of the get method itself.

The error message I receive is "Type 'IBar' is not assignable to type 'T'."

When comparing this situation to C#, I believe a similar approach would work. I would greatly appreciate any examples or guidance that could help me resolve this issue.

Thank you.

javascript typescript

Answer 1

Answer №1

Attempts to execute the above code in C# would also fail. Both languages aim to prevent such actions to ensure type safety. Consider the code snippet below:

class Foo {
    get<T extends IBar>() : T {
        var item = this.list[0];
        return item;
    }

    list : Array<IBar> = [ new OneClass() ];
}

var foo = new Foo();
var item = foo.get<AnotherClass>();

Even though both OneClass and AnotherClass implement IBar, the variable list[0] is of type OneClass, while the caller requests an instance of AnotherClass. Allowing the code as written would result in item being typed as

AnotherClass</code but holding an instance of <code>OneClass

, potentially leading to runtime errors.

Similar to C#, TypeScript offers a way to override this type safety with a type assertion, or cast. However, it's recommended to implement another mechanism to ensure that the array item is of the correct type for T:

class Foo {
    get<T extends IBar>() : T {
        var item = this.list[0];
        return item as T;
    }
    list : Array<IBar> = [];
}

var foo = new Foo();
var item = foo.get<IFizz>();

Answer 2

Attempts to execute the above code in C# would also fail. Both languages aim to prevent such actions to ensure type safety. Consider the code snippet below:

class Foo {
    get<T extends IBar>() : T {
        var item = this.list[0];
        return item;
    }

    list : Array<IBar> = [ new OneClass() ];
}

var foo = new Foo();
var item = foo.get<AnotherClass>();

Even though both OneClass and AnotherClass implement IBar, the variable list[0] is of type OneClass, while the caller requests an instance of AnotherClass. Allowing the code as written would result in item being typed as

AnotherClass</code but holding an instance of <code>OneClass

, potentially leading to runtime errors.

Similar to C#, TypeScript offers a way to override this type safety with a type assertion, or cast. However, it's recommended to implement another mechanism to ensure that the array item is of the correct type for T:

class Foo {
    get<T extends IBar>() : T {
        var item = this.list[0];
        return item as T;
    }
    list : Array<IBar> = [];
}

var foo = new Foo();
var item = foo.get<IFizz>();

Answer 3

Answer №2

It is being argued that statically asserting the item at index 0 as an IFizz rather than just an IBar is not possible given the declaration of Foo. This assertion can only be confirmed at runtime with specific data. While you could technically assert it (return item as T;), this would simply mask the underlying issue: there is no guarantee that the item at index 0 will actually be an IFizz when the code is executed.

If the intention is for the list to exclusively hold IFizz instances, then it should be explicitly declared as such. On the other hand, if the list is meant to hold any type of IBar, then it should be declared accordingly, and any code relying on it for IFizz instances must ensure this condition holds true.

Perhaps a more appropriate approach would be to parameterize Foo with the specific type of IBar it will store:

class Foo<T extends IBar> {

  get() : T {
    var item = this.list[0];
    return item;
  }

  list : Array<T>;
}

Following this, you can retrieve the item as follows:

var item = foo.get();

Answer 4

It is being argued that statically asserting the item at index 0 as an IFizz rather than just an IBar is not possible given the declaration of Foo. This assertion can only be confirmed at runtime with specific data. While you could technically assert it (return item as T;), this would simply mask the underlying issue: there is no guarantee that the item at index 0 will actually be an IFizz when the code is executed.

If the intention is for the list to exclusively hold IFizz instances, then it should be explicitly declared as such. On the other hand, if the list is meant to hold any type of IBar, then it should be declared accordingly, and any code relying on it for IFizz instances must ensure this condition holds true.

Perhaps a more appropriate approach would be to parameterize Foo with the specific type of IBar it will store:

class Foo<T extends IBar> {

  get() : T {
    var item = this.list[0];
    return item;
  }

  list : Array<T>;
}

Following this, you can retrieve the item as follows:

var item = foo.get();

How to retrieve an object of type T from a collection of classes that extend a common base type in Typescript

Answer №1

Answer №2

Similar questions

Inform the Angular2 Component regarding the creation of DOM elements that are placed outside of the

After refreshing, the LocalStorage in Angular 2 seems to disappear

The metallic material in Substance Painter appears as a dark shade in A-Frame

Spacing issues with inline-block elements when dealing with a large quantity of items

Tips for removing arrays and their values when a duplicate id is detected

Encountering an unrecognized error on Windows when attempting to execute a child process with regex return

Display the number of items that have been filtered as soon as the Mixitup page loads

Firestore data displaying as null values

Determining the instance type of a TypeScript singleton class

Error TS5023 occurs when the integrated terminal in Visual Studio Code encounters an unfamiliar option 'w' while executing the tsc -w command

Saving asp.net strings in different formats to datetime fields in a database

Using Redux Form to set the default checked radio button in a form setting

Decrease the construction duration within a sprawling Angular 8 project

Add an event listener to a dynamically created div block through jQuery when it is clicked

Design a progress bar that advances in increments of at least two and up to a maximum of

Syncing data between parent and child components in VueJS using v-bind:sync with an object parameter for bidirectional data flow

Using SCSS based on the browser language in Angular: A Step-by-Step Guide

Angular 5 APP_INITIALIZER: Provider parse error - Cyclic dependency instantiation not possible

Using an Object as a parameter in a Typescript function

Removing values in javascript for checkboxes that are not selected