TypeScript Iterate over object and create a type from the values

Question

Given I have an object like this:

const props = [
    { name: 'car', list: { brand: 'audi', model: 's4' }
    { name: 'motorcycle', list: { type: 'ktm', color: 'orange' }
] as constant;

I want to create a type that represents something like this:

type Props = {
    car?: 'brand' | 'model',
    motorcycle?: 'type' | 'color'
};

The closest I got was something like this:

type Props = Partial<Record<typeof props[number]['name'], typeof props[number]['list']>

But returns something like this:

type Props = {
    car?: { brand: 'audi', model: 's4' } | { type: 'ktm' | color: 'orange' } | undefined,
    motorcycle?: { brand: 'audi', model: 's4' } | { type: 'ktm' | color: 'orange' } | undefined
}

How can I achieve the desired result?

Oblosys · Accepted Answer · 2021-03-03 17:01:22Z

1

You can use key remapping that was introduced in TypeScript 4.1 (docs) to achieve this:

type IndexKeys<T> = Exclude<keyof T, keyof []>
type ListProp = { name: string, list: object }
type GetName<P> = P extends ListProp ? P['name'] : never
type GetListKeys<P> = P extends ListProp ? keyof P['list'] : never

type PropsFromList<PropList extends ReadonlyArray<ListProp>> = {
  [i in IndexKeys<PropList> as GetName<PropList[i]>]?: GetListKeys<PropList[i]>
}

type Props = PropsFromList<typeof props>
// Inferred type:
// Props: {
//     car?: "brand" | "model" | undefined;
//     motorcycle?: "type" | "color" | undefined;
// }

Note that just like when using Partial, the optional property types get an extra but harmless | undefined.

TypeScript playground

edited Mar 3, 2021 at 17:01

answered Mar 3, 2021 at 16:23

Oblosys

15.2k3 gold badges33 silver badges41 bronze badges

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

1 Comment

Oblosys Over a year ago

Glad to help! The second thing seems be possible, but to keep this question clear, I'd suggest creating a new question for it.

Collectives™ on Stack Overflow

TypeScript Iterate over object and create a type from the values

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