深入理解TypeScript判别式联合：解决“可能为undefined”错误

DDD

发布时间：2025-11-09 13:32:15

397人浏览过

来源于php中文网

原创

深入理解typescript判别式联合：解决“可能为undefined”错误

本文深入探讨TypeScript中处理具有互斥可选属性的对象时遇到的“可能为undefined”错误。通过分析传统类型检查的局限性，文章详细阐述了如何利用判别式联合（Discriminated Unions）这一强大特性，构建更安全、更具表现力的类型定义。通过具体的代码示例，演示了判别式联合如何帮助TypeScript编译器在运行时正确推断类型，从而消除不必要的类型错误，提升代码的可维护性和健壮性。

理解TypeScript中“可能为undefined”的挑战

在TypeScript中，当定义一个接口（interface）或类型（type）时，如果某些属性被标记为可选（使用 ?），那么在访问这些属性之前，TypeScript会要求开发者进行空值检查，以避免运行时错误。然而，在某些复杂场景下，即使我们通过 Object.hasOwn() 或 in 运算符检查了属性的存在，TypeScript编译器仍然可能报告“可能为undefined”的错误（TS18048），这常常让初学者感到困惑。

考虑以下示例，我们定义了一个 Shape 接口，它根据 kind 属性的不同，可能包含 radius 或 sideLength：

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

在这个 getArea 函数中，我们试图根据 shape.kind 的值来计算面积。尽管在访问 shape.radius 或 shape.sideLength 之前，我们都使用了 Object.hasOwn() 或 in 运算符来检查属性是否存在，TypeScript编译器依然发出了“可能为undefined”的错误。

问题根源分析：

Object.hasOwn() 和 in 运算符确实能够确认一个对象是否拥有某个属性。然而，对于TypeScript的类型系统而言，它们只能提供运行时属性存在的证据，却无法改变或细化编译时已确定的类型信息。

在上述 Shape 接口中：

radius?: number 意味着 radius 属性可能存在，也可能不存在；如果存在，其值可以是 number 类型，也可能是 undefined。
sideLength?: number 同理。

当 shape.kind === "circle" 时，TypeScript知道 shape 是一个 Shape 类型，并且其 kind 属性是 "circle"。但是，Shape 接口的定义并没有强制要求当 kind 为 "circle" 时，radius 属性必须存在且为 number 类型。从类型系统的角度看，一个 kind 为 "circle" 的 Shape 对象，理论上仍然可以不包含 radius 属性，或者 radius 属性的值为 undefined。因此，即使 Object.hasOwn(shape, "radius") 返回 true，TypeScript也无法确定此时 shape.radius 的类型就一定是 number 而非 number | undefined。这种类型与运行时检查之间的信息不对称，导致了编译器的困惑。

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

解决这类问题的最佳实践是使用TypeScript的判别式联合（Discriminated Unions）。判别式联合是一种强大的类型模式，它允许我们定义一个类型，该类型是多个具有共同“判别式”属性的类型之一。通过检查这个判别式属性的值，TypeScript编译器可以智能地推断出当前对象的具体类型，从而安全地访问其特有属性。

要实现判别式联合，我们需要：

ShopWe 网店系统

1.修正会员卡升级会员级别的判定方式2.修正了订单换货状态用户管理中心订单不显示的问题3.完善后台积分设置数据格式验证方式4.优化前台分页程序5.解决综合模板找回密码提示错误问题6.优化商品支付模块程序7.重写优惠卷代码8.优惠卷使用方式改为1卡1号的方式9.优惠卷支持打印功能10.重新支付模块，所有支付方式支持自动对账11.去掉规格库存显示12.修正部分功能商品价格显示4个0的问题13.全新的支

下载

定义一个共同的“判别式”属性（例如 kind），其值在联合的每个成员中都是唯一的字面量类型。
将每个可能的“形状”定义为一个独立的接口或类型别名，并确保它们各自包含所有必需的属性，而不是可选属性。
将这些独立的类型组合成一个联合类型。

下面是使用判别式联合重构 Shape 类型的示例：

type Shape =
  | {
      kind: 'circle'; // 判别式属性，值为字面量 'circle'
      radius: number; // 圆形特有属性，此处为必需属性
    }
  | {
      kind: 'square'; // 判别式属性，值为字面量 'square'
      sideLength: number; // 正方形特有属性，此处为必需属性
    };

判别式联合的工作原理：

通过上述定义，Shape 类型现在明确表示：一个 Shape 对象要么是 kind 为 'circle' 且必须包含 radius: number 的对象，要么是 kind 为 'square' 且必须包含 sideLength: number 的对象。

当我们在 getArea 函数中对 shape.kind 进行检查时，TypeScript的类型推断机制会发挥作用：

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 函数不再需要 Object.hasOwn() 或 in 运算符来检查属性是否存在。仅仅通过检查 shape.kind 的值，TypeScript就能自动将 shape 的类型收窄到联合中的特定成员，从而允许我们安全地访问 radius 或 sideLength 属性，并且这些属性被保证是 number 类型，而不是 number | undefined。