Create interface dynamically from JS object of properties and options

Question

Is it possible to do the following in Typescript:

I have an object whose keys are properties and values are an array of the options for these properties:

const options = {
  foo: [fooOption1, fooOption2, ...],
  bar: [barOption1, barOption2, ...],
  ...
}

Is it possible to create an interface such that

interface example {
  foo: fooOption1 | fooOption2 | ...,
  bar: barOption1 | barOption2 | ...,
  ...
}

Lesiak · Accepted Answer · 2021-02-21 23:38:24Z

1

Firstly, change your options object to a constant:

const options = {
  foo: ['fooOption1', 'fooOption2'],
  bar: ['barOption1', 'barOption2']
} as const;

Then, you can create desired interface by mapping each array to an union:

type OptionsInterface = {
    [K in keyof typeof options]: typeof options[K][number]
}


const xx: OptionsInterface = {
   foo: 'fooOption1',
   bar: 'barOptionError' // Expected error: 
                         // Type '"barOptionError"' is not assignable to type '"barOption1" | "barOption2"'.(2322)
}

See:

edited Feb 21, 2021 at 23:38

answered Feb 21, 2021 at 23:23

Lesiak

26.5k2 gold badges54 silver badges79 bronze badges

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

1 Comment

arcrub Over a year ago

Thanks a lot, that's very helpful! I thought you couldn't do this, but it seems it's only not possible for interfaces.

Collectives™ on Stack Overflow

Create interface dynamically from JS object of properties and options

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related