React组件用TS类型给状态赋值时出现TypeScript错误

出现这个错误的核心原因是：TypeScript将你传入的'success'推断成了宽泛的string类型，而非你定义的Color联合字面量类型，导致和SetStateAction<Color>的参数类型不匹配。以下是几种实用的解决方式：

方法1：使用类型断言明确类型 #

直接告诉TypeScript传入的字符串属于Color类型：

setMessageSeverity('success' as Color);

方法2：使用const断言缩小类型范围 #

通过as const让TypeScript把字符串推断为具体的字面量类型，而非通用的string：

setMessageSeverity('success' as const);

这种方式不需要显式引用Color类型，更简洁且安全。

方法3：提前定义符合类型的变量 #

如果这个状态值需要复用，可以先声明一个符合Color类型的变量，再传入：

const targetSeverity: Color = 'success';
setMessageSeverity(targetSeverity);

方法4：优化初始状态的类型推导（可选） #

虽然你已经给useState指定了<Color>，但如果初始值的类型推断不够严谨，可以进一步强化：

const [messageSeverity, setMessageSeverity] = useState<Color>('success' as const);

这能让初始值的类型更精准，避免后续赋值时的类型歧义。

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