类型的嵌套道具的记录类型答案

【问题标题】：Record type of nested prop of type类型的嵌套道具的记录类型
【发布时间】：2021-12-24 23:34:30
【问题描述】：

我的一个界面中有以下类型：

export interface CardProps {
  component?:
    |  'BatteryHealth'
    |  'DriveHealth'
    |  'SSDTrim'
    |  'ThermalDashboard'
    |  'MainFeature'
    |  'DiskSpace'
    |  'Benchmark'
    |  'Scanning'
    |  'Uninstaller'

  // other props of the interface
}

我正在使用该接口为与此相关的另一个对象创建类型：

const components: Record<CardProps['component'], React.ComponentType> {
  // and here it gives me keys for that new components object
  // that match the possible values of the component property, like so:
  BatteryHealth: BatteryHealthComponent,
  DriveHealth: DriveHealthComponent,
  // ...
  // which is exactly what I want.
}

现在情况发生了一些变化，我不得不重新设计那个界面，它现在看起来像这样：

export interface CardProps {
  component?:
    | { type: 'BatteryHealth'; props: BatteryHealthCardProps }
    | { type: 'DriveHealth'; props: DriveHealthCardProps }
    | { type: 'SSDTrim'; props: SSDTrimCardProps }
    | { type: 'ThermalDashboard'; props: ThermalDashboardCardProps }
    | { type: 'MainFeature'; props: MainFeatureCardProps }
    | { type: 'DiskSpace'; props: DiskSpaceCardProps }
    | { type: 'Benchmark'; props: BenchmarkCardProps }
    | { type: 'Scanning'; props: ScanningCardProps }
    | { type: 'Uninstaller'; props: UninstallerCardProps }
}

组件不再是字符串，它是一个具有两个属性的对象：type 是一个字符串，props 是另一个对应的接口，必须附加到该字符串值。

问题是现在我的Record类型已经失效了，这当然是正常的，因为组件不再是字符串，而是对象，所以我尝试了以下操作：

const components: Record<CardProps['component']['type'], React.ComponentType> {
  BatteryHealth: BatteryHealthComponent,
  DriveHealth: DriveHealthComponent,
  // ...
}

我的钥匙还在那里并且没有错误，但现在我使用这些组件的地方给了我一个错误：

Type '{ img: ImageContainerProps; icon: ImageContainerProps; } | 
      { img: ImageContainerProps; } | 
      { iconImg?: ImageContainerProps; description?: string; } | 
       ... 5 more ... | 
      { ...; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'.
  Type '{ img: ImageContainerProps; icon: ImageContainerProps; }' has no properties in common with type 'IntrinsicAttributes & { children?: ReactNode; }'.

当它只是组件的纯字符串名称时，一切正常，没有错误。

截图：http://prntscr.com/1zb2yif

【问题讨论】：

标签： reactjs typescript react-tsx

【解决方案1】：

Playground

// define your props as a javascript array - don't forget "as const"
const props = [
{ type: 'BatteryHealth', props: 'some-props' },
{ type: 'DriveHealth', props: 'some-props' },
{ type: 'SSDTrim', props: 'some-props' },
{ type: 'ThermalDashboard', props: 'some-props' },
{ type: 'MainFeature', props: 'some-props' },
{ type: 'DiskSpace', props: 'some-props' },
{ type: 'Benchmark', props: 'some-props' },
{ type: 'Scanning', props: 'some-props' },
{ type: 'Uninstaller', props: 'some-props' },
] as const

// extract the props as a type
type CardProps = typeof props[number]

const components: Record<CardProps['type'], string> = {
  BatteryHealth: "foo",
  DriveHealth: "bar",
  InvalidComponent: "oh no" // error, as expected
}

【讨论】：