为什么TypeScript处理Material UI Alert的severity属性会出现类型报错？

核心原因是TypeScript的字面量类型拓宽（Literal Type Widening）规则在两种场景下的表现不同：

两种场景的类型推断差异 #

• 直接赋值字符串给const变量的场景
  当你写const foo = "success"时，因为const变量本身不能被重新赋值，TS会做最窄的类型推断，foo的类型是字符串字面量类型"success"，而不是宽泛的string。MUI的Alert组件severity属性要求的Color类型本身是"success" | "error" | "info" | "warning"的联合类型，"success"字面量属于这个联合的子集，所以类型校验通过。

• 赋值给对象属性的场景
  当你写const foo = {stuff:"success"}时，TS默认对对象属性的推断会做类型拓宽，也就是说foo的类型会被推断为{ stuff: string }，因为对象的属性默认是可以被修改的（你后续可以写foo.stuff = "abc"），TS不会默认把属性限定为固定的字面量类型。这时候foo.stuff的类型是宽泛的string，string类型不能赋值给只接受4个固定字符串的Color联合类型，所以抛出类型错误。

解决方案 #

如果要让对象属性也保持字面量类型，可以用以下几个方法：

1. 给整个对象加as const断言，让TS把对象所有属性都推断为不可修改的字面量类型：

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

2. 显式定义对象的类型，直接约束属性为Color类型：

import type { Color } from '@mui/material'
const foo: { stuff: Color } = {stuff:"success"}

3. 传递属性时加类型断言（适合临时修复，类型安全性低于前两种）：

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

内容的提问来源于stack exchange，提问作者dosebot