TypeScript与React展开props时类型不兼容问题求助

这个问题我之前也踩过坑！本质是TypeScript对对象字面量的类型推断规则在搞鬼，咱们一步步拆解原因和解决方案：

问题根源 #

当你直接写 <Foo fooLevel={1} /> 时，TypeScript会自动把字面量1窄化到FooLevel（1|2|3）这个联合类型里，所以类型匹配完全没问题。

但当你把值放到props对象里：

const props = { fooLevel: 1 }

TypeScript会默认把fooLevel的类型拓宽成number（而不是保持字面量1的具体类型），这时候展开<Foo {...props} />，number类型自然和FooLevel的联合类型不兼容，就抛出类型错误了。

三种可行的解决方案 #

1. 给props显式指定FooProps类型 #

直接给变量加上类型注解，强制TypeScript按照FooProps的规则检查对象，从根源避免类型拓宽：

const props: FooProps = { fooLevel: 1 }
<Foo {...props} /> // 类型匹配正常

2. 使用const断言锁定字面量类型 #

用as const让TypeScript保留字面量的具体类型，不自动进行类型拓宽：

const props = { fooLevel: 1 as const }
<Foo {...props} /> // fooLevel类型被锁定为1，完美符合FooLevel

3. 直接把props断言为FooProps #

如果是临时场景，也可以直接给整个对象加类型断言快速解决：

const props = { fooLevel: 1 } as FooProps
<Foo {...props} /> // 类型检查顺利通过

这几种方法都能解决问题，我个人更推荐第一种——显式指定类型，代码可读性和维护性更好，还能提前发现不符合FooProps规范的错误。

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