Convert enum to array of objects

Question

I have an enum defined as following:

export enum SwitchEnum{
  On = 'ON',
  Off = 'OFF',
}

I want to create a an array of objects from this enum so I tried as following:

export interface SelectProps {
  id: number;
  value: string | number | undefined;
  label: string | undefined;
}

const listItems: SelectProps [] = Object.keys(SwitchEnum).map((key, index) => ({
  id: index,
  value: SwitchEnum[key],
  label: key
}));

But Typescript is complaining with this error:

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'typeof SwitchEnum'.
  No index signature with a parameter of type 'string' was found on type 'typeof SwitchEnum'

How can I solve this?

Answer 1

In TypeScript, enums are used as types at compile-time to achieve type-safety for the constants but they are treated as objects at runtime. This is because, they are converted to plain objects once the TypeScript code is compiled to JavaScript. So, the explanation of the objects above is applicable here too. So to fix the typeScript error you should change your code into this:

const listItems: SelectProps [] = Object.keys(SwitchEnum).map((key,index) => ({
 id: index,
 value: SwitchEnum[key as keyof typeof SwitchEnum],
 label: key
}));