Infer property names from array property values in Typescript

Question

Given the interface

interface FormField {
    name: string;
}

and a value such as:

const fields: FormField[] = [
    { name: 'givenName' },
    { name: 'familyName' }
]

I would like to infer this interface:

interface FormModel {
    givenName: string;
    familyName: string;
}

So use the array's property values as property names.

I tried something like:

type Model<T extends Array<FormField>> = { [K['name'] in T]: string };

but this doesn't work. Is this kind of thing possible in Typescript?

ford04 · Accepted Answer · 2020-01-19 11:19:21Z

Your solution already goes in the right direction, we can tune the types a bit up to make it work:

// make name generic, so we can refer to concrete string literal
interface FormField<T extends string> {
    name: T;
}

const fields = [
    { name: 'givenName' },
    { name: 'familyName' }
] as const  // const assertion to retain strings "givenName" and "familyName"

// T[number] gives all possible array values, T[number]["name"] all possible names
type Model<T extends ReadonlyArray<FormField<any>>> = { [K in T[number]["name"]]: string };

type FormModel = Model<typeof fields> // { givenName: string; familyName: string; }

fields doesn't have an explicit type FormField[] anymore in order to preserve literal types. If you still want to have stong type checks for fields, you can use a factory function:

const formField = <T extends string>(t: T): FormField<T> => ({ name: t })

const fields = [
  formField('givenName'),
  formField('familyName'),
  formField(3) // 💣, error
]

Code sample

Collectives™ on Stack Overflow

Infer property names from array property values in Typescript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related