CODEWITHSUNDEEP
typescriptenums
JaLe
JaLe

Reputation: 419

How to create enum values as type/interface in typescript?

I have enum:

enum DemoEnum {
    a = 'EnumValueA',
    b = 'EnumValueB'
}

I would like to create type Type = 'EnumValueA' | 'EnumValueB' from my enum values.

How can I do this?

My current state is type of "keys":

type Type = keyof typeof DemoEnum // 'a' | 'b'

For example I would like to use it in my react props.

type Props {
   value: 'EnumValueA' | 'EnumValueB',
}

In case of usage <MyComponent value='EnumValueA'>

type Props {
   value: DemoEnum,
}

I am getting an error Type .. is not assignable to DemoEnum

Upvotes: 7

Views: 9327

Answers (2)

PJCHENder
PJCHENder

Reputation: 6010

After the Template Literal Types released, you can directly use it to get what you want:

type Enum = `${DemoEnum}` //  "EnumValueA" | "EnumValueB"

Upvotes: 14

jcalz
jcalz

Reputation: 328097

Generally enums are meant to shield users from having to care about their particular values. In some sense you should be able to change the actual string/number values and not change the rest of your code. The conventional way to use this in your react component would therefore look like:

type Props = {
    value: DemoEnum
}

<MyComponent value={DemoEnum.a} />

which should compile without error.

On the flip side, if you find yourself caring a lot about the actual string values "EnumValueA" and "EnumValueB", you might consider abandoning enums entirely and just make a plain object for it:

const DemoEnum = {
    a: 'EnumValueA',
    b: 'EnumValueB'
} as const;

and synthesize the types you care about by inspecting it:

type DemoEnumObject = typeof DemoEnum;
type DemoEnum = DemoEnumObject[keyof DemoEnumObject];

type Props = {
    value: DemoEnum
}

which then will work as

<MyComponent value="EnumValueA" />

or as

<MyComponent value={DemoEnum.a} />

Playground link

Upvotes: 5

Related Questions