Typescript/React - 一种道具的多种类型不起作用

Question

我定义了以下类型。 CurrencyStat和ScoreStat扩展了Stat 。

export interface Stat {
  value: number;
  change?: number;
}

type Currency = "USD" | "RMB";

export interface CurrencyStat extends Stat {
  currency: Currency;
}

export interface ScoreStat extends Stat {
 outof: number;
}

现在我正在尝试定义一个组件StatDisplay ，以显示统计信息，而不管它是哪种统计类型。 我收到以下错误： Property 'currency' does not exist on type 'Stat | CurrencyStat'. Property 'currency' does not exist on type 'Stat'.ts(2339) Property 'currency' does not exist on type 'Stat | CurrencyStat'. Property 'currency' does not exist on type 'Stat'.ts(2339) Property 'currency' does not exist on type 'Stat | CurrencyStat'. Property 'currency' does not exist on type 'Stat'.ts(2339) ，即使我在 prop stat上使用联合类型。

我是这些[reading typescript docs][1]说“如果我们有一个联合类型的值，我们只能访问联合中所有类型共有的成员。” 这就解释了为什么联合类型在这里可能不起作用，但现在我很难找到一种方法来使它起作用。

我知道可以删除CurrencyStat并将currency添加为Stat的可选属性，但稍后会有更多的统计类型，如果可能的话，我希望将它们分开。

import { CurrencyStat, ScoreStat, Stat } from "../../../../types/types";
export const StatDisplay = ({
  label,
  stat,
}: {
  label: string;
  stat: Stat | CurrencyStat;
}) => {
  return (
    <div className="flex flex-col items-center">
      <div className="flex items-center">
        <div className="">{stat?.currency}</div>
        <div className="text-2xl font-semibold">{stat.value}</div>
      </div>
      <div className="">{label}</div>
    </div>
  );
};

Answer 1

CurrencyStat已经实现了Stat接口，因为您正在使用它进行扩展。

要解决您的问题，您只需将组件 function params stat变量更改为CurrenyStat或Stat & Partial<CurrencyStat>

Partial意味着您可以使用Stat键传递 object 但不能保证CurrencyStat 。

这是示例：

export const StatDisplay = ({
  label,
  stat,
}: {
  label: string;
  stat: Stat & Partial<CurrencyStat>;
}) => { ... }