TypeScript结合MUI使用Chip组件时Color类型不兼容报错如何解决？

MUI的Chip组件color属性原生仅支持"default" | "primary" | "secondary"三种取值，你传入的变量类型为自定义Color，和官方定义的属性类型不匹配，就会触发该类型报错，由于运行时不会校验TS类型，所以代码能正常运行仅编辑器提示错误。

• 类型断言快速修复：直接将传入的color变量断言为Chip支持的属性类型即可，代码示例：

// 优先使用官方导出的属性类型更规范
import type { ChipProps } from '@material-ui/core/Chip'

<Chip color={yourColorVariable as ChipProps['color']} />

• 扩展MUI类型定义适配自定义Color：如果确实需要自定义color取值范围，可以在全局类型声明文件中扩充MUI的内置类型，示例如下：

// 你的自定义Color类型如果是从其他文件导入先导入
import type { Color } from './your-type-file'

declare module '@material-ui/core/Chip' {
  interface ChipPropsColorOverrides {
    [key in Color]: true
  }
}

添加后TS会自动将你定义的Color所有取值纳入Chip的color属性合法范围，不会再报类型错误。

• 限定自定义Color的取值范围：如果你的自定义Color不需要额外值，直接将它的取值和Chip支持的color对齐即可，示例：

enum Color {
  Default = 'default',
  Primary = 'primary',
  Secondary = 'secondary'
}

这样类型天然匹配，不需要额外处理就能通过TS校验。

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