TS2339：Array.find 在可区分联合中未正确推断类型

Question

在这个例子中，我有一个购物车，它可以装满不同种类的物品，在这个例子中是高尔夫球和高尔夫球杆，它们有自己的选择。

Typescript Playground link

下面的代码出现以下错误：

TS2339: Property 'color' does not exist on type '{ color: "blue" | "red" | "white"; } | { variant: "wedge" | "putter"; }'.
  Property 'color' does not exist on type '{ variant: "wedge" | "putter"; }'.

type ProductGolfBall = {
  type: "golfball";
  options: {
    color: "blue" | "red" | "white";
  };
};

type ProductGolfClub = {
  type: "golfclub";
  options: {
    variant: "wedge" | "putter";
  };
};

type CartItem = ProductGolfBall | ProductGolfClub;
type CartItems = Array<CartItem>;

const cart: CartItems = [
  {
    type: "golfball",
    options: {
      color: "blue"
    }
  },
  {
    type: "golfclub",
    options: {
      variant: "wedge"
    }
  },
  {
    type: "golfclub",
    options: {
      variant: "putter"
    }
  }
];

const golfball = cart.find((item) => item.type === "golfball");

if (golfball) { // Check that it's truthy
  // According to typescript this can still be either ProductGolfClub or ProductGolfBall
  console.log(golfball.type)
  console.log(golfball.options.color) // Produces the TS2339 error above
}

现在我只是不明白为什么 golfball 变量仍然可以是 ProductGolfClub 当查找操作仅对 type 属性为 golfball 的数组项返回 true 时。

我可以将 golfball 变量设置为 ProductGolfBall，但必须有其他方法让 typescript 了解变量的类型。

Answer 1

不幸的是，TS 无法从这种情况下开箱即用地制作类型保护。 但是您可以通过明确说明该功能将确保什么来手动完成，请考虑：

function isGolfBall(item: CartItem): item is ProductGolfBall {
    return item.type === "golfball";
}

const golfball = cart.find(isGolfBall)

if (golfball) { // Check that it's truthy
  console.log(golfball.type)
  console.log(golfball.options.color) // no error ?
}

最重要的是:item is ProductGolfBall，这意味着我们明确地说这个函数将是一个类型保护，它只会为ProductGolfBall传递（返回true）。

内联解决方案也可以：

const golfball = cart.find((item): item is ProductGolfBall => item.type === "golfball")