TypeScript开发React组件传递对象属性为props报类型错误如何解决？

TypeScript 默认对普通对象的属性值会执行「类型拓宽」操作：你定义的LIST_OF_TYPES对象没有加特殊类型断言时，内部的TYPE1、TYPE2属性会被推断为通用的string类型，而不是字面量类型'type1'、'type2'。
而组件的type prop要求的是仅包含'type1'、'type2'两个值的字面量联合类型IExampleComponentType，宽泛的string类型无法赋值给收窄的字面量联合类型，因此触发TS2322类型不匹配报错。

• 方案一：给常量对象添加as const断言（最常用）
  as const会将对象的所有属性标记为只读，同时将属性值的类型锁定为初始赋值的字面量类型，不会触发类型拓宽。修改常量定义即可：

export const LIST_OF_TYPES = {
  TYPE1: 'type1',
  TYPE2: 'type2',
} as const;

修改后LIST_OF_TYPES.TYPE1的类型就是精确的'type1'，和prop要求的类型完全匹配，报错直接消除。

• 方案二：从常量对象自动派生联合类型（最优维护性）
  避免手动定义联合类型时和常量值重复写两次，后续新增枚举值只需要修改常量对象即可，类型会自动同步：

// 先定义常量对象
export const LIST_OF_TYPES = {
  TYPE1: 'type1',
  TYPE2: 'type2',
} as const;
// 从常量对象的值自动生成联合类型
export type IExampleComponentType = typeof LIST_OF_TYPES[keyof typeof LIST_OF_TYPES];

// 组件prop定义保持不变即可
interface IExampleComponentProps {
  type: IExampleComponentType;
}

• 方案三：给单个属性手动添加类型断言（仅临时修复用）
  如果不想修改全局常量的定义，也可以在传值的时候单独断言：

<ExampleComponent type={LIST_OF_TYPES.TYPE1 as IExampleComponentType} />

该方案仅适合临时调试使用，每一处传值都要加断言，维护成本高，不推荐作为长期方案。

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