TypeScript中属性存在检查后仍报“可能为undefined”错误原因问询

你的代码： #

interface Shape {
  kind: "circle" | "square",
  radius?: number,
  sideLength?: number
}

function getArea(shape: Shape): number | undefined {
  if (shape.kind === "circle" && Object.hasOwn(shape, "radius")) {
    // 'shape.radius' is possibly 'undefined'. ts(18048)
    return Math.PI * shape.radius**2;
  }
  else if (shape.kind === "square" && "sideLength" in shape) {
    // 'shape.sideLength' is possibly 'undefined'. ts(18048)
    return shape.sideLength**2;
  }
  return undefined;
}

问题： #

为何我会收到两个“is possibly undefined”错误？我的逻辑存在什么问题？我不是已经在计算前检查了属性是否存在吗？我使用了Object.hasOwn和in操作符，但两种情况都持续报错。

原因与解决方案： #

核心问题是 TypeScript 无法通过Object.hasOwn或in操作符，将属性存在性和属性值的非undefined性关联起来。

你的Shape接口里，radius和sideLength是可选属性——这意味着就算属性存在于对象上，它的值也可能是undefined（比如{ kind: "circle", radius: undefined }这种合法的Shape实例）。而in或Object.hasOwn只能证明“这个属性在对象上”，没法证明“属性值不是undefined”，所以 TypeScript 依然会报错。

快速修复：直接检查属性值是否非undefined

把检查逻辑改成直接判断属性值本身，TypeScript 就能正确收窄类型：

interface Shape {
  kind: "circle" | "square",
  radius?: number,
  sideLength?: number
}

function getArea(shape: Shape): number | undefined {
  if (shape.kind === "circle" && shape.radius !== undefined) {
    return Math.PI * shape.radius**2;
  }
  else if (shape.kind === "square" && shape.sideLength !== undefined) {
    return shape.sideLength**2;
  }
  return undefined;
}

更优方案：使用可辨识联合类型

从根源上避免这类问题，把Shape拆成明确的子类型，让 TypeScript 能通过kind字段精准识别类型：

type Circle = {
  kind: "circle";
  radius: number;
};

type Square = {
  kind: "square";
  sideLength: number;
};

type Shape = Circle | Square;

function getArea(shape: Shape): number {
  if (shape.kind === "circle") {
    return Math.PI * shape.radius**2;
  } else {
    // TypeScript自动推断这里是Square类型，sideLength必然存在
    return shape.sideLength**2;
  }
}

这种写法不仅消除了类型报错，还让代码逻辑更清晰，避免了属性可选带来的不确定性。

内容的提问来源于stack exchange，提问作者komote7665