通过兄弟道具值推断反应道具的类型

Question

我定义了两种不同的Shop 类型：

interface BasicShop {
  address: string;
  distance?: number | null;
  name: string;
  thumbnail?: string;
}
interface FullShop {
  address: string;
  categories: string[];
  distance?: number | null;
  keywords: string[];
  lat: number;
  lng: number;
  name: string;
  rating: number;
  reviews: number;
  thumbnail?: string;
}

FullShop 的字段比BasicShop 多。

我正在尝试定义一个反应组件ShopListItem，它的 prop 类型如下：

type PropType = {
    size: 'sm' | 'md',
    shop: BasicShop | FullShop
}

我希望shop的类型可以由size的值来确定。例如，如果size=sm，则比shop=BasicShop 和size=md 比shop=FullShop。这样我就可以编写以下代码 没有类型错误：

<ShopListItem size='sm' shop={(object of type BasicShop)} />
<ShopListItem size='md' shop={(object of type FullShop)} />

我怎样才能实现这种行为？

Answer 1

将联合类型用于整个定义而不是“结构”中的字段，您将获得discriminate union (or ADT)：

type PropType =
    { size: 'sm', shop: BasicShop }
  | { size: 'md', shop: FullShop }