使用两个不同的 prop 接口 React TypeScript 组件

Question

我想创建一个 React TypeScript 组件，其 props 是两个不同接口的联合。但是，当我这样做时，我会收到警告：

TS2339: Property 'color' does not exist on type 'PropsWithChildren<Props>'

如何创建一个结合两个不同 prop 接口的 React TypeScript 组件，同时能够解构这些 prop？谢谢！

sampleComponent.tsx：

import * as React from 'react';

interface SamplePropsOne {
  name: string;
}

interface SamplePropsTwo {
  color: string;
}

type Props = SamplePropsOne | SamplePropsTwo;

const SampleComponent: React.FC<Props> = ({ color, name }) => (
  color ? (
    <h1>{color}</h1>
  ) : (
    <h1>{name}</h1>
  )
);

export default SampleComponent;

Answer 1

在 TypeScript 允许您从联合类型中读取 name 或 color 之前，它需要一些证据来证明您正在使用正确类型的 Props（SamplePropsOne 或 SamplePropsTwo）。有几种标准方法可以提供它。

一种是通过引入一个属性来区分联合的分支，从而使联合成为一个标记联合。这种类型检查就好了：

interface SamplePropsOne {
  type: 'one';
  name: string;
}

interface SamplePropsTwo {
  type: 'two';
  color: string;
}

type Props = SamplePropsOne | SamplePropsTwo;

const SampleComponent: React.FC<Props> = props => (
  props.type === 'one' ? (
    <h1>{props.name}</h1>
  ) : (
    <h1>{props.color}</h1>
  )
);

如果你把案例倒过来（就像我在写这篇文章时所做的那样！），那么 TypeScript 会抱怨。

如果某个属性的存在足以区分类型，那么可以使用in运算符：

interface SamplePropsOne {
  name: string;
}
interface SamplePropsTwo {
  color: string;
}
type Props = SamplePropsOne | SamplePropsTwo;

const SampleComponent: React.FC<Props> = props => (
  'color' in props ? (
    <h1>{props.color}</h1>
  ) : (
    <h1>{props.name}</h1>
  )
);

如果确定您拥有哪种类型的对象需要更复杂的逻辑，您可以编写user-defined type guard。关键部分是返回类型中的“is”：

function isSampleOne(props: Props): props is SamplePropsOne {
  return 'name' in props;
}

const SampleComponent: React.FC<Props> = props => (
  isSampleOne(props) ? (
    <h1>{props.name}</h1>
  ) : (
    <h1>{props.color}</h1>
  )
);

还值得注意的是，由于结构类型的工作方式，您的示例中的props 没有理由不能同时拥有name 和 color：

const el = <SampleComponent name="roses" color="red" />;  // ok

如果不允许这样做很重要，您需要使用一些稍微花哨的类型：

interface SamplePropsOne {
  name: string;
  color?: never;
}
interface SamplePropsTwo {
  color: string;
  name?: never;
}
type Props = SamplePropsOne | SamplePropsTwo;

ts-essentials 库有一个 XOR generic，可用于帮助构建这样的独占联合。

Answer 2

我想你要找的是intersection types。

替换这一行：

type Props = SamplePropsOne | SamplePropsTwo;

用这一行：

type Props = SamplePropsOne & SamplePropsTwo;

• 交集类型：将多个接口/类型合二为一

• 联合类型：选择多个接口/类型之一

编辑

你想要的是不可能的（我认为）。您可以做的是在转换 props 之后在一行中解构每种类型：

const SampleComponent: React.FC<Props> = props => {
  const { name } = props as SamplePropsOne;
  const { color } = props as SamplePropsTwo;

  return color ? <h1>{color}</h1> : <h1>{name}</h1>;
};