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

Question

我有枚举：

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

我想type Type = 'EnumValueA' | 'EnumValueB'从我的枚举值创建。

我怎样才能做到这一点？

我当前的状态是“键”类型：

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

例如，我想在我的反应道具中使用它。

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

使用时<MyComponent value='EnumValueA'>

type Props {
   value: DemoEnum,
}

我收到错误Type .. is not assignable to DemoEnum

Answer 1

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

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

Answer 2

一般来说，enums 的目的是让用户不必关心他们的特定值。从某种意义上说，您应该能够更改实际的字符串/数字值，而不更改代码的其余部分。因此，在 React 组件中使用它的传统方法如下所示：

type Props = {
    value: DemoEnum
}

<MyComponent value={DemoEnum.a} />

编译应该没有错误。

另一方面，如果您发现自己非常关心实际的字符串值"EnumValueA"和"EnumValueB"，您可能会考虑完全放弃enums 并为其创建一个普通对象：

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

并通过检查综合您关心的类型：

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

type Props = {
    value: DemoEnum
}

然后将作为

<MyComponent value="EnumValueA" />

或作为

<MyComponent value={DemoEnum.a} />