An interface that is extended by an optional generic parameter

Question

An interface that is extended by an optional generic parameter

I currently have an exported abstract class that has one generic. However, I now require two generics. I do not want to modify all existing classes that are using this class. Therefore, I am looking to add an optional generic class that extends an interface.

Here is my current implementation:

export abstract class SharedShell<T extends IBase, T1 extends IBase> implements OnInit, OnDestroy {}

What would be the best approach to make T1 optional? I attempted the following:

export abstract class SharedShell<T extends IBase, T1 extends IBase | Undefined = Undefined> implements OnInit, OnDestroy {}

However, I encountered a type error:

'IBase' can be assigned to the constraint of type 'T1', but 'T1' could potentially be instantiated with a different subtype of constraint 'IBase'.

This is where I am facing a roadblock. How should I proceed to address this issue?

View TS Playground example

angular typescript generics

Answer 1

Answer №1

In order to utilize your SharedShell as stated, I would implement a conditional type utilizing the Extract utility type to transform T1 into a suitable form:

export abstract class SharedShell<T extends IBase, T1 extends IBase | undefined = undefined> {
    constructor(private detailService: ISharedService<T | Extract<T1, IBase>>,
        private listService: ISharedService<T>,
    ) { }
}

If T1 is undefined, then Extract<T1, IBase> will result in never, making T | never equal to T... which aligns with your requirements. If T1 represents a union (e.g., SomeSubtypeOfIBase | undefined), then Extract<T1, IBase> will only include the part that can be assigned to IBase (e.g., SomeSubtypeOfIBase).

I am unsure of the purpose served by the second parameter T1, so the subsequent suggestion may not be feasible, but: you could consider setting T1 to default to never and excluding undefined from the domain of T1. With this approach, the type T | T1 will always be assignable to

IBase</code, leading to seamless operation:</p>
<pre><code>export abstract class SharedShell<T extends IBase, T1 extends IBase = never> {
    constructor(private detailService: ISharedService<T | T1>,
        private listService: ISharedService<T>,
    ) { }
}

Once again, without further context on how T1 is utilized, I cannot guarantee the effectiveness of this solution. However, it offers a more simplistic approach.

Playground link to code

Answer 2

In order to utilize your SharedShell as stated, I would implement a conditional type utilizing the Extract utility type to transform T1 into a suitable form:

export abstract class SharedShell<T extends IBase, T1 extends IBase | undefined = undefined> {
    constructor(private detailService: ISharedService<T | Extract<T1, IBase>>,
        private listService: ISharedService<T>,
    ) { }
}

If T1 is undefined, then Extract<T1, IBase> will result in never, making T | never equal to T... which aligns with your requirements. If T1 represents a union (e.g., SomeSubtypeOfIBase | undefined), then Extract<T1, IBase> will only include the part that can be assigned to IBase (e.g., SomeSubtypeOfIBase).

I am unsure of the purpose served by the second parameter T1, so the subsequent suggestion may not be feasible, but: you could consider setting T1 to default to never and excluding undefined from the domain of T1. With this approach, the type T | T1 will always be assignable to

IBase</code, leading to seamless operation:</p>
<pre><code>export abstract class SharedShell<T extends IBase, T1 extends IBase = never> {
    constructor(private detailService: ISharedService<T | T1>,
        private listService: ISharedService<T>,
    ) { }
}

Once again, without further context on how T1 is utilized, I cannot guarantee the effectiveness of this solution. However, it offers a more simplistic approach.

Playground link to code

An interface that is extended by an optional generic parameter

Answer №1

Similar questions

Storing checkbox status in Angular 7 with local storage

What is the best way to incorporate a class creation pattern in Typescript that allows one class to dynamically extend any other class based on certain conditions?

I'm wondering why Jest is taking 10 seconds to run just two simple TypeScript tests. How can I figure out the cause of this sluggish performance?

A function that takes in a type identifier and a portion of a type, and then outputs the full type

The TypeScript import statement is causing a conflict with the local declaration of 'Snackbar'

How can I display the value of a radio button that has been chosen?

Angular fixes corrupted Excel files

Angular: Implementing conditional HTTP requests within a loop

Having conflicting useEffects?

Angular TimeTracker for tracking time spent on tasks

How can I update a dropdown menu depending on the selection made in another dropdown using Angular

Utilize Knex to retrieve data from the req.query

What could be causing text to not appear when a button is clicked with Observable in Angular 2?

What is the method for adding local images to FormData in Expo version 48 and above?

Having trouble with the disabled property in Angular 10? Learn how to properly use it and troubleshoot

Modifying the color of the error icon in Quasar's q-input component: a step-by-step guide

What is the best way to retrieve a function's response depending on the parameters provided?

What are the steps to set up NextJS 12.2 with SWC, Jest, Eslint, and Typescript for optimal configuration?

When utilizing Next.js with TypeScript, you may encounter an error message stating that the property 'className' is not found on the type 'IntrinsicAttributes & IntrinsicClassAttributes'

Guide to extracting the JSON array from a JSON object with Angular