知道为什么 Typescript 使用 Material UI Alert 严重性属性会以这种方式运行吗？答案

【问题标题】：Any idea why Typescript behaves this way with Material UI Alert severity prop?知道为什么 Typescript 使用 Material UI Alert 严重性属性会以这种方式运行吗？
【发布时间】：2021-09-30 18:18:25
【问题描述】：

我有一个使用 Typescript 启动的 react 项目，但出现以下错误

Type 'string' is not assignable to type 'Color | undefined'.

当我有这样的事情时......

const foo = {stuff:"success"}

<MuiAlert
  onClose={handleSnackbarClose} 
  severity={foo.stuff}
>
  Words
</MuiAlert>

如果 const foo 是一个字符串，代码可以正常工作...

const foo = "success"

<MuiAlert
  onClose={handleSnackbarClose} 
  severity={foo}
>
  Words
</MuiAlert>

调用字符串变量和调用对象内部的字符串有区别吗？

【问题讨论】：

一个 const 字符串字面量在编译时是已知的（保证不会改变），但对象属性值可以在运行时改变。
以 Jared 的响应为基础，您可以声明 foo const foo = { stuff: "success" } as { stuff: Color | undefined }; 上允许的内容

标签： javascript reactjs typescript material-ui

【解决方案1】：

在您分享的示例中，基础类型的处理方式不同。更详细：

const foo = "success"

foo 的类型现在实际上是 "success"。 Typescript 知道它被设置为 "success" 并且因为它是一个常量，所以它永远不会改变。

但是，这个：

const foo = { stuff: "success"}

...解析为{stuff: string} 类型。 Typescript 知道它是一个带有键“stuff”的对象，但由于对象是可变的，它不知道bar.stuff 将始终是"success"。它回退到更通用的 string 类型。

那么，您遇到的错误是因为您在某处定义的 Color 类型接受值 "success"，但它不接受任何字符串。所以第一个例子对编译器来说是可以接受的，但它不知道第二个应该符合相同的一组值。

另一种方法是这样做：

const foo: {stuff: Color} = {stuff: "success"}

这样，Typescript 将知道foo 的stuff 字段将始终是Color。作为奖励，当您开始输入将存储在 foo.stuff 中的字符串时，您会获得自动完成功能。

【讨论】：

啊，有道理！！感谢您的洞察力！

【解决方案2】：

这是因为严重性在 MUI 中输入为所谓的Literal Type。
他们将严重性定义为只接受几个字符串的联合。

Typescript 手册中的Literal inference 下描述了您的代码问题。

foo.stuff 只是字符串类型而不是'success'的文字类型，但是如果你将foo直接赋值给该值，它可以同时表示字符串类型和文字类型'success'，这就是严重性prop 接受。

或更通用： foo 是常量，但 foo.stuff 不是。 foo.stuff 可能随时更改，不再包含您刚刚分配的值。由于您没有显式键入 foo，因此 foo.stuff 可以接受任何字符串值，而不仅仅是您刚刚分配给它的文字字符串。

【讨论】：