typescript - 为什么这些结构相似的类型不兼容？

Question

如果我声明以下类型:

export type Type1 = { id: string } | { id: number };
export type Type2 = { id: string } | { id: number };

为什么我用下面的方式会报错:

function displayItem(item: Type1) {
  loadItem({ id: item.id });          // error is indicated here
}

function loadItem(item: Type2) {}

我的理解来自https://www.typescriptlang.org/docs/handbook/type-compatibility.html是它们应该是等价的，因为它们在结构上是相同的。

根据答案进行更简单的重现(不需要第二种类型):

export type Type1 = { id: string } | { id: number };

function displayItem(item: Type1) {
   loadItem({ id: item.id });          // error is indicated here
}

function loadItem(item: Type1) {}

Answer 1

在深度上，您正在尝试分配类型为number | 的值。 string 到 number 或 string。

由于您正在访问 item.id，根据您的类型定义，id 可以是 string 或 number .您的 Type2 需要一个与 {id: string | 不同的对象 {id: string} 或 {id: number}号码.

因此，有两种不同的方案可以解决此事故。

1. 声明您的 Type2 期望一个名为 id 的键，它是 number |字符串
2. 将整个 item 对象传递给您的第二个函数。这就是所谓的类型兼容性