Conditional generics in TypeScript based on a constructor argument

Question

Conditional generics in TypeScript based on a constructor argument

Within my class structure, I have the following:

class Collection<ID extends string | number> {
    entries: ID[];

    constructor(private readonly useStringIds: boolean) {}

    getIds(): ID[] {
        return entries.map((entry) => entry.id);
    }

    handleResults(results: ObjectWithNumberId[]) {
        if (this.useStringIds) {
            this.entries = results.map((result) => ({
                ...result,
                id: result.id.toString(),
            }));
        } else {
            this.entries = results;
        }        
    }
}

There are scenarios where the id field may remain a number, while at other times it needs to be converted.

Is there a way to simplify this in TypeScript so that by just passing an argument to the class, the generic type automatically aligns with the argument passed into the constructor (

const c = new Collection<string>(true);

)?

typescript

Answer 1

Answer №1

Indeed, there is a solution available. It becomes much easier when you need to directly incorporate the generic into the constructor signature.

class Wrapper<Type extends string | number> {
  constructor(value: Type) {}
}

const wrapper = new Wrapper("test") // typeof Wrapper<string>

However, we can also adapt it to suit your specific scenario, as long as you grasp the concept mentioned above. We will utilize conditional types.

class Collection<UseStringIds extends boolean, ID extends UseStringIds extends true ? string : number = UseStringIds extends true ? string : number> {
  constructor(useStringIds: UseStringIds) {}
  ...
}

const myInstance = new Collection(false) // typeof Collection<true, number>
type myInstanceType = Collection<true> // typeof Collection<true, string>

Let's break down the somewhat lengthy Generic declaration:

UseStringIds extends boolean will be inferred according to your instantiation.

UseStringIds extends true ? string : number

this expression relies on UseStringIds. If UseStringIds is true, it becomes a string; otherwise, it is a number. We assign this to ID using: ID extends .... Then, we replicate the same expression for the default type as well. This way, when using it as a type, you only need to write Collection<true>.

Answer 2

Indeed, there is a solution available. It becomes much easier when you need to directly incorporate the generic into the constructor signature.

class Wrapper<Type extends string | number> {
  constructor(value: Type) {}
}

const wrapper = new Wrapper("test") // typeof Wrapper<string>

However, we can also adapt it to suit your specific scenario, as long as you grasp the concept mentioned above. We will utilize conditional types.

class Collection<UseStringIds extends boolean, ID extends UseStringIds extends true ? string : number = UseStringIds extends true ? string : number> {
  constructor(useStringIds: UseStringIds) {}
  ...
}

const myInstance = new Collection(false) // typeof Collection<true, number>
type myInstanceType = Collection<true> // typeof Collection<true, string>

Let's break down the somewhat lengthy Generic declaration:

UseStringIds extends boolean will be inferred according to your instantiation.

UseStringIds extends true ? string : number

this expression relies on UseStringIds. If UseStringIds is true, it becomes a string; otherwise, it is a number. We assign this to ID using: ID extends .... Then, we replicate the same expression for the default type as well. This way, when using it as a type, you only need to write Collection<true>.

Conditional generics in TypeScript based on a constructor argument

Answer №1

Similar questions

the ng-repeat directive disables input controls within the tfoot

Issues with Webpack and TypeScript CommonsChunkPlugin functionality not functioning as expected

Establishing a Recyclable Testing Rendering Method in redux toolkit version 2

Establish a many-to-many relationship in Prisma where one of the fields is sourced from a separate table

Upon updating AngularFire, an error is thrown stating: "FirebaseError: Expected type 'Ea', but instead received a custom Ta object."

Preventing the compilation process from overwriting process.env variables in webpack: A step-by-step guide

How can I best declare a reactive variable without a value in Vue 3 using TypeScript?

Tips for sending the image file path to a React component

Is there a specific method for conducting a production build using AngularCLI rc.1?

Adaptable Style Properties Adjusted by Component Size

Creating a randomly generated array within a Reactjs application

Angular: Real-time monitoring of changes in the attribute value of a modal dialog and applying or removing a class to the element

The style fails to load correctly upon the page's initial loading

Encountered an error: Object(...) does not conform to function standards in the handleChange method

Retrieve a variable in a child component by passing it down from the parent component and triggering it from the parent

The synchronization between Typescript and the HTML view breaks down

Utilizing Typescript to ensure property keys within a class are valid

In TypeScript, develop a specialized Unwrap<T> utility type

Dynamic URL used in TRPC queries`

Building upon the foundation: Extending a base component in Angular