TypeScript中可选属性的类型收窄与判别联合-js教程-PHP中文网

TypeScript中可选属性的类型收窄与判别联合

聖光之護

发布： 2025-11-09 14:52:02

原创

557人浏览过

typescript中可选属性的类型收窄与判别联合

本文探讨了TypeScript中处理带有可选属性的对象时，即使进行了属性存在性检查，仍可能遇到“possibly 'undefined'”错误的问题。我们将深入分析为何`Object.hasOwn`或`in`操作符不足以进行类型收窄，并介绍如何通过使用判别联合（Discriminated Unions）这一强大的类型模式，来构建更安全、更可预测的代码，从而有效解决此类类型错误。

理解TypeScript中可选属性的类型收窄挑战

在TypeScript中，当一个接口或类型定义了可选属性（例如radius?: number），这意味着该属性可能存在且值为number，也可能根本不存在，或者存在但其值为undefined。即使我们使用Object.hasOwn()或in操作符来检查属性是否存在，TypeScript的类型检查器也无法自动将该属性的类型从number | undefined收窄为number。

考虑以下初始代码示例：

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;
}

登录后复制

在这个例子中，尽管我们明确检查了shape对象是否拥有radius或sideLength属性，TypeScript编译器仍然报告'shape.radius' is possibly 'undefined'的错误。这是因为Object.hasOwn()和in操作符只能确认属性是否存在于对象上，但它们无法保证该属性的值不是undefined。对于TypeScript而言，如果一个属性被定义为可选的 (?)，那么它的类型就是T | undefined，即使属性存在，其值也可能是undefined。这种检查不足以让编译器确信radius或sideLength在计算时一定是一个number类型。

解决方案：利用判别联合（Discriminated Unions）

解决这类问题的最佳实践是使用判别联合（Discriminated Unions）。判别联合是一种强大的类型模式，它允许我们定义一个类型，该类型可以是几种不同类型之一，并且每种类型都有一个共同的、字面量类型的属性（称为判别式或辨别属性）。通过检查这个判别式属性的值，TypeScript能够智能地收窄到联合类型中的特定成员。

我们将Shape接口重构为判别联合类型：

type Shape =
  | {
      kind: 'circle';
      radius: number; // 'circle' 类型时，radius 必须存在且为 number
    }
  | {
      kind: 'square';
      sideLength: number; // 'square' 类型时，sideLength 必须存在且为 number
    };

登录后复制

在这个新的Shape类型定义中：

可图大模型

可图大模型（Kolors）是快手大模型团队自研打造的文生图AI大模型

查看详情

我们不再使用可选属性。
kind属性作为判别式，其值可以是'circle'或'square'。
当kind为'circle'时，radius属性被明确定义为number类型，并且是必需的。
当kind为'square'时，sideLength属性被明确定义为number类型，并且是必需的。

通过这种方式，Shape类型的每个成员都明确了其所需的特定属性，并且这些属性不再是可选的。

实现判别联合进行类型收窄

现在，我们可以修改getArea函数来利用判别联合的特性。当我们在if语句中检查shape.kind时，TypeScript会自动将shape的类型收窄到联合类型中匹配的成员，从而消除“possibly 'undefined'”的错误。

type Shape =
  | {
      kind: 'circle';
      radius: number;
    }
  | {
      kind: 'square';
      sideLength: number;
    };

function getArea(shape: Shape): number { // 返回类型现在可以是 number，因为所有路径都保证了计算
  if (shape.kind === "circle") {
    // 在这里，TypeScript 知道 shape 的类型是 { kind: 'circle'; radius: number; }
    // 因此 shape.radius 必然是 number，不再是 undefined
    return Math.PI * shape.radius**2;
  } else { // 否则，shape.kind 必然是 "square"
    // 在这里，TypeScript 知道 shape 的类型是 { kind: 'square'; sideLength: number; }
    // 因此 shape.sideLength 必然是 number，不再是 undefined
    return shape.sideLength**2;
  }
}

// 示例使用
const myCircle: Shape = { kind: 'circle', radius: 10 };
const mySquare: Shape = { kind: 'square', sideLength: 5 };

console.log(`圆形面积: ${getArea(myCircle)}`); // 输出: 圆形面积: 314.1592653589793
console.log(`正方形面积: ${getArea(mySquare)}`); // 输出: 正方形面积: 25

登录后复制

在这个修正后的getArea函数中：

当shape.kind === "circle"时，TypeScript能够智能地推断出shape的类型现在是{ kind: 'circle'; radius: number; }。因此，shape.radius被确认为number类型，ts(18048)错误消失。
同理，在else分支中，shape.kind必然是"square"，shape被收窄为{ kind: 'square'; sideLength: number; }，shape.sideLength也因此被确认为number类型。
由于所有路径现在都保证返回一个number，函数的返回类型也可以更精确地定义为number，而不是number | undefined，除非确实存在无法计算面积的情况。