@lit-labs/react创建React组件报string无法赋值给Fit类型问题

这个类型错误是TS类型拓宽导致的：

• 你定义的Lit组件中fit属性是收窄的字面量联合类型，仅接受'small' | 'medium' | 'large'三个固定值。createComponent会自动基于Lit类的类型定义推导React组件的Props类型，因此封装后的MyButtonComponent对fit属性的类型要求和原Lit组件完全一致。
• 你写React.useState<string>('medium')时，手动给状态加了string泛型，把fit的类型从初始值的'medium'字面量拓宽成了任意字符串。TS不允许把宽泛的任意字符串赋值给仅接受三个固定值的属性，因此报错。而label属性本身类型就是string，所以传参不会触发错误。

方法1：给useState指定正确的泛型类型（推荐，类型安全性最高） #

不要用宽泛的string作为状态类型，直接对齐组件要求的联合类型即可：

const [fit, setFit] = React.useState<'small' | 'medium' | 'large'>('medium');

如果不想重复写类型定义、避免后续组件属性迭代时类型不同步，可以直接从封装好的组件上提取对应属性的类型：

// 提取封装组件的所有Props类型
type MyButtonComponentProps = React.ComponentProps<typeof MyButtonComponent>;
// 直接使用提取到的fit属性类型作为状态类型
const [fit, setFit] = React.useState<MyButtonComponentProps['fit']>('medium');

方法2：传参时使用类型断言（适合临时快速修复，安全性稍弱） #

如果你确定fit状态的值只会是三个合法值之一，也可以在传参时做类型断言，强制让TS认可类型匹配：

<MyButtonComponent 
  label="test" 
  fit={fit as 'small' | 'medium' | 'large'}
/>

注意：不建议长期使用类型断言的方案，如果后续业务代码给fit赋了不在合法范围内的字符串值，TS不会做提前校验，可能导致组件运行不符合预期。

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