打字稿字符串枚举类型 'string' 不可分配给类型

Question

很简单，如何避免这个编译错误？

type ExampleClass = {
    relevantValue: EXAMPLE_STRING_ENUM;
}

enum EXAMPLE_STRING_ENUM {
    HELLO = 'hello',
}

const exampleArray: ExampleClass[] = [];

const mockData = {
    relevantValue: 'hello'
}

exampleArray.push(mockData);

结果

Argument of type '{ relevantValue: string; }' is not assignable to parameter of type 'ExampleClass'. Types of property 'relevantValue' are incompatible. Type 'string' is not assignable to type 'EXAMPLE_STRING_ENUM'.(2345)

在我看来这应该可行。在写代码的过程中，我可以有一个 switch/case 语句，这取决于给定的字段是什么，但是模拟数据来自实时，所以它当然没有枚举值，而是直接使用字符串值。
我想既然它是一个字符串枚举，打字稿应该知道这些值只能是字符串类型？
我可以通过创建这样的联合类型来修复它：

type ExampleClass = {
    relevantValue: EXAMPLE_STRING_ENUM | string;
}

但这并没有真正解决根本问题，我仍在努力解决这个问题。
此外，此 'fix' 会导致后续错误，例如：

exampleArray.forEach((e) => {
setFoo(e.relevantValue)
})

Argument of type 'string' is not assignable to parameter of type 'SetStateAction<EXAMPLE_STRING_ENUM | undefined>'.(2345)

EDIT：通过键入编译器无法知道提供的字符串是否真的与其中一个 ENUM 字符串匹配的所有值来解决它，因此抛出错误是有道理的。更新代码：

const [foo, setFoo] = React.useState<EXAMPLE_STRING_ENUM>();


type ExampleClass = {
    relevantValue: string;
}

enum EXAMPLE_STRING_ENUM {
    HELLO = 'hello',
}

const exampleArray: ExampleClass[] = [];

const mockData: ExampleClass = {
    relevantValue: 'hello'
}

exampleArray.forEach((e) => {
setFoo(e.relevantValue as EXAMPLE_STRING_ENUM)
})

Answer 1

您需要向 mockData 常量添加保护，让 Typescript 知道 relevantValue 被限制为枚举中的值：

const mockData: ExampleClass = {
    relevantValue: EXAMPLE_STRING_ENUM.HELLO
}

如果您不这样做，则允许以下内容，这就是您的示例中出现打字稿错误的原因：

mockData.relevantValue = 'not an enum value';

playground

打字稿字符串枚举类型 'string' 不可分配给类型

Typescript String enum type 'string' is not assignable to type

enums

typescript

reactjs