TypeScript: inferring data types from variadic tuple types

Question

Variadic tuple types allow us to provide the caller of a function, a tuple return type driven by the tuple supplied to the function like so:

function makeArrayAsConstItems<T extends readonly any[]>(...arr: [...T]): {[K in keyof T]: {item: T[K]} } {
    return arr.map(item => ({ item })) as any;
}

const arrayAsConstItems = makeArrayAsConstItems('cfgh', 1, new Date());

// this is the type
const arrayAsConstItems: [{
    item: string;
}, {
    item: number;
}, {
    item: Date;
}]

Now consider we want to do two more things:

Narrow the items that can be supplied in each array element to be a type of Data<TypeOfData>
Extract the type we're going to be returning from Data<TypeOfData>; so use TypeOfData essentially

interface Data<TypeOfData = unknown> {
    data: TypeOfData;
}

function makeArrayAsConstItemsForDataTypesOnly<T extends readonly Data[]>(...arr: [...T]): {[K in keyof T]: {item: T[K]} } {
    return arr.map(item => ({ item })) as any;
}

const arrayAsConstItemsForDataTypesOnly = makeArrayAsConstItemsForDataTypesOnly(
    { data: 'cfgh' }, 
    { data: 1 }, 
    { data: new Date() }
)

What would we need to do for arrayAsConstItemsForDataTypesOnly to have the same type as arrayAsConstItems?

At present the type is:

const arrayAsConstItemsForDataTypesOnly: [{
    item: {
        data: string;
    };
}, {
    item: {
        data: number;
    };
}, {
    item: {
        data: Date;
    };
}]

And we desire it to be:

const arrayAsConstItemsForDataTypesOnly: [{
    item: string;
}, {
    item: number;
}, {
    item: Date;
}]

This is @A_blop's suggestion:

function makeArrayAsConstItemsForDataTypesOnly<T extends readonly Data[]>(...arr: [...T]): {[K in keyof T]: {item: Extract<T[K], Data>["data"]} } {
    return arr.map(item => ({ item })) as any;
}

Have you tried {[K in keyof T]: {item: Extract<T[K], Data>["data"]} } ? — A_blop
– A_blop, Commented Jan 3, 2021 at 16:31
that works! Do you want to add it as an answer and I'll accept? — John Reilly
– John Reilly, Commented Jan 3, 2021 at 16:47

A_blop · Accepted Answer · 2021-01-03 17:12:03Z

3

We can do that by utilizing lookup types in combination with the Extract utility type:

function fn<T extends readonly Data[]>(...arr: [...T]):
    { [K in keyof T]: { item: Extract<T[K], Data>["data"] } } {/* impl */}

const arrayAsConstItemsForDataTypesOnly = fn(
    { data: 'cfgh' },
    { data: 1 },
    { data: new Date() }
)
/*
[{
    item: string;
}, {
    item: number;
}, {
    item: Date;
}]
 */

As TypeScript cannot resolve T[K] further, we need to first convince it again, that the resulting type has a data property accessible via lookup operator. This is done by Extract.

Playground

answered Jan 3, 2021 at 17:12

A_blop

8925 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

John Reilly Over a year ago

Thanks so much for your answer @A_blop! Just what I needed; in case you're curious, the motivation was working on this: github.com/tannerlinsley/react-query/pull/…

Collectives™ on Stack Overflow

TypeScript: inferring data types from variadic tuple types

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related