如何在打字稿中创建枚举值作为类型/接口？

Question

I have enum:

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

I would like to create type Type = 'EnumValueA' | 'EnumValueB' 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

Answer 1

Generally enum s 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 enum s 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

Answer 2

Template Literal Types 发布后，你可以直接使用它来得到你想要的：

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