在 Typescript/React 中使用一种或另一种接口类型

Posted 2023-03-13

【中文标题】在 Typescript/React 中使用一种或另一种接口类型

【英文标题】：Use one or another interface type in Typescript/React

【发布时间】：2022-01-19 17:59:08

【问题描述】：

有这种类型：

export interface IMyTypes 
  First: 
    name: string;
    city: string;
    country: string;
    status: string;
  ;
  Second: 
    name: string;
    age: number;
    height: number;
  ;

这必须在组件中使用，但我不能让它同时接受，props 应该是 First 或 Second。

我可以让它为 First 工作：

import  IMyTypes  from '../my-types';

interface MyComponentProps 
  componentProps: ComponentProps<IMyTypes['First']>;

或者第二个：

interface MyComponentProps 
  componentProps: ComponentProps<IMyTypes['Second']>;

但无法使其接受其中一个，尝试如下但不正确：

interface MyComponentProps 
  componentProps: ComponentProps<IMyTypes['First' | 'Second']>;

有解决办法吗？

【问题讨论】：

ComponentProps<IMyTypes['First'] | IMyTypes['Second']>。在interface 中包装First 和Second 看起来很奇怪......

或ComponentProps<IMyTypes[keyof IMyTypes]>

大部分你会在以后重用'First'和'Second'，所以只需将它们提取为单独的类型或接口并在componentProps中使用。如果有进一步的错误 - 请将其添加到帖子中

@AlekseyL。我收到以下错误：键入 'ComponentProps' 不能分配给类型 'ComponentProps'

查看联合类型：typescriptlang.org/docs/handbook/2/…

【参考方案1】：

解决问题的解决方案：

interface MyComponentProps 
  componentProps:
    | ComponentProps<IMyTypes['First']>
    | ComponentProps<IMyTypes['Second']>;