Exploring Typescript's Generic Unions

Question

Exploring Typescript's Generic Unions

I'm facing an issue where I have an Array of generic objects and want to iterate over them, but TypeScript is not allowing me to do so. Below is a snippet of the code I am working with. Any ideas on how to solve this problem?

type someGeneric<T> = { item: T };

type stringGeneric = someGeneric<string>;

type numberGeneric = someGeneric<number>;

type someFunction = <T>(generic: someGeneric<T>) => T;

const someFunction: someFunction = (generic) => generic.item;

const stringGeneric: stringGeneric = { item: 'some String' },
    numberGeneric: numberGeneric = { item: 12 };

let genericArray = [stringGeneric, numberGeneric];
genericArray.forEach(generic => {
    someFunction(generic); // Error On This line.
});

If you'd like to test out the code yourself, feel free to paste it into this online tool. Unfortunately, I can't share the code directly here.

typescript typescript-typings typescript-generics

Answer 1

Answer №1

The issue arises when the function is given a parameter of type someGeneric<T>. If we attempt to pass a parameter of type

someGeneric<number> | someGeneric<string>

, TypeScript will not deduce T from it and will simply state that the union is not compatible with the type someGeneric<T>.

To address this, we can modify the function definition so that the type parameter extends someGeneric<any>, making it compatible with the union. We can then utilize a conditional type to extract the item type from T. Since conditional types distribute over unions, the result of extraction will be a union of the generic parameters for someGeneric<T>.

type someGeneric<T> = { item: T };

type stringGeneric = someGeneric<string>;

type numberGeneric = someGeneric<number>;

type extractItemFromSomeGeneric<T extends someGeneric<any>> = T extends someGeneric<infer U> ? U : never;  
type someFunction = <T extends someGeneric<any>>(generic: T) => extractItemFromSomeGeneric<T>;

const someFunction: someFunction = (generic) => generic.item;

const stringGeneric: stringGeneric = { item: 'some String' },
    numberGeneric: numberGeneric = { item: 12 };

let someGeneric = [stringGeneric, numberGeneric];
someGeneric.forEach(generic => {
    someFunction(generic); // returns string | number
});

Playground link

Answer 2

The issue arises when the function is given a parameter of type someGeneric<T>. If we attempt to pass a parameter of type

someGeneric<number> | someGeneric<string>

, TypeScript will not deduce T from it and will simply state that the union is not compatible with the type someGeneric<T>.

To address this, we can modify the function definition so that the type parameter extends someGeneric<any>, making it compatible with the union. We can then utilize a conditional type to extract the item type from T. Since conditional types distribute over unions, the result of extraction will be a union of the generic parameters for someGeneric<T>.

type someGeneric<T> = { item: T };

type stringGeneric = someGeneric<string>;

type numberGeneric = someGeneric<number>;

type extractItemFromSomeGeneric<T extends someGeneric<any>> = T extends someGeneric<infer U> ? U : never;  
type someFunction = <T extends someGeneric<any>>(generic: T) => extractItemFromSomeGeneric<T>;

const someFunction: someFunction = (generic) => generic.item;

const stringGeneric: stringGeneric = { item: 'some String' },
    numberGeneric: numberGeneric = { item: 12 };

let someGeneric = [stringGeneric, numberGeneric];
someGeneric.forEach(generic => {
    someFunction(generic); // returns string | number
});

Playground link

Exploring Typescript's Generic Unions

Answer №1

Similar questions

What is the process for an Angular Component to receive a return object from a service following an HTTP

Mongoose failing to persist subdocument

Using Material UI Slider along with Typescript for handling onChange event with either a single number or an

Unusual conduct exhibited by a 16th version Angular module?

What could be the reason for my button not activating my JavaScript function?

Acquiring information from a Service and saving it in a Child component - Angular version 11

Reacting to the dynamic removal of spaces

Is it possible to modify the content of an element with a click event in Angular/HTML?

ng serve issue persists even after resolving vulnerabilities

Unable to properly display date formatting in AG-Grid using the Angular date pipe

In React-Redux, attempting to assign a value to an empty string is not permitted

What is the most effective method for identifying duplicate values in a multidimensional array using typescript or javascript?

Is it feasible to append an element to the result of a function that returns an array?

Restrict the scope of 'unknown' to an object containing only a string-field without resorting to 'any'

Concealing a VueJs component on specific pages

Encountering a Issue with Http module in Angular

[Nuxt.js/Typescript] Accessing Vuex data in Nuxt.js using Typescript

Having difficulty navigating to a different page in Angular 4

Ways to retrieve interface definition using a variable

Tips for utilizing array.items in joiful validation?