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

Question

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

Why do you want this? Can you show some code where such a type is necessary? Depending on the use case, you can just use DemoEnum as the type, since it is a subtype of the union you're looking for. — jcalz
– jcalz, Commented Sep 4, 2020 at 18:42

PJCHENder · Accepted Answer · 2021-07-05 15:19:05Z

14

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

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

answered Jul 5, 2021 at 15:19

PJCHENder

6,0503 gold badges22 silver badges39 bronze badges

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

1 Comment

Lars Ejaas Over a year ago

Thanks a lot for this! Have been looking for a solution to this. This is the only real answer to the question!

jcalz · Accepted Answer · 2020-09-04 19:03:25Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related