TypeScript JSX下字符串字面量组件Props类型推断错误如何解决

当你在JSX的大括号{}内直接书写字符串字面量时，旧版本TypeScript会默认将字符串字面量的类型拓宽为通用的string类型，和组件要求的'white' | 'black'联合类型不匹配，因此触发报错。

最简方案（优先使用） #

JSX原生支持字符串类型的props直接作为属性值书写，不需要用大括号包裹，这种写法下TypeScript会自动将值推断为对应的字符串字面量类型，不会出现类型拓宽问题：

<TextWrapper color="white">Hello world!</TextWrapper>

大括号传值的场景方案 #

如果props值需要动态计算、必须包裹在大括号内，正确的类型断言写法如下，之前写法不生效大概率是断言位置或TS版本兼容问题：

// 写法1：用as const固定字面量类型
<TextWrapper color={'white' as const}>Hello world!</TextWrapper>

// 写法2：直接断言为允许的联合类型
<TextWrapper color={'white' as keyof Colors}>Hello world!</TextWrapper>

通用组件优化方案 #

如果不想在调用组件时额外处理类型，可以调整组件的props定义，既保留智能提示又避免报错：

// 调整props类型，支持任意字符串输入，同时保留Colors内key的智能提示
const TextWrapper = styled.p<{ color: keyof Colors | (string & {}) }>`
  color: ${({ color }) => theme[color as keyof Colors]};
`

不推荐的全局配置调整 #

不建议通过关闭tsconfig校验的方式解决，会牺牲整个项目的类型安全性。如果一定要关闭，可将tsconfig.json中的strict配置项设为false，但会导致大量合法的类型校验失效。

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