代码之家  ›  专栏  ›  技术社区  ›  Leo Messi

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

  •  0
  • Leo Messi  · 技术社区  · 3 年前

    有这种类型的:

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

    这必须在一个组件中使用,但我不能让它同时接受这两个,道具应该是第一个或第二个。

    我可以先让它工作:

    import { IMyTypes } from '../my-types';
    
    interface MyComponentProps {
      componentProps: ComponentProps<IMyTypes['First']>;
    }
    

    或者第二个:

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

    但无法使其接受其中一个,尝试了以下方法,但不正确:

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

    有解决办法吗?

    0 回复  |  直到 3 年前
        1
  •  0
  •   Leo Messi    3 年前

    解决问题的解决方案是:

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