TypeScript提取嵌套联合类型的type生成Record后组件props报错如何解决

你当前的错误是因为组件映射的类型定义没有将组件类型和其对应的入参props做绑定：

• 你使用的React.ComponentType没有携带泛型参数，默认对应ComponentType<{}>，仅支持可选的children属性，不允许传入其他自定义props
• 重构后的component属性把每个组件的专属props和type做了绑定，但组件映射的类型没有同步关联这种对应关系，导致传入props时类型不匹配

1. 首先提取type到props的映射类型
   首先处理CardProps['component']的可选属性，去除undefined后构造类型映射：

// 先提取component的联合类型，排除undefined
type ComponentUnion = NonNullable<CardProps['component']>
// 构造type字符串到对应props的映射类型
type ComponentPropsMap = {
  [T in ComponentUnion as T['type']]: T['props']
}

2. 调整组件映射对象的类型定义
   把每个组件的类型和它对应的props绑定：

const components: {
  [K in keyof ComponentPropsMap]: React.ComponentType<ComponentPropsMap[K]>
} = {
  BatteryHealth: BatteryHealthComponent,
  DriveHealth: DriveHealthComponent,
  // 剩余其他组件映射
}

3. 组件调用处类型自动匹配
   在渲染组件的位置直接解构参数使用即可，TypeScript会自动完成类型校验：

function Card(cardProps: CardProps) {
  if (!cardProps.component) return null
  const { type, props } = cardProps.component
  const Component = components[type]
  // 此处传入props不会再报类型不匹配错误
  return <Component {...props} />
}

如果需要单独获取type的联合类型，记得要先去除component的undefined修饰符：

// 正确写法
type ComponentTypeUnion = NonNullable<CardProps['component']>['type']

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