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 | ...,
  ...
}

Answer 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:

• Mapped Types
• TypeScript: Define a union type from an array of strings