TypeScript类型安全：利用判别式联合处理可选属性的“可能未定义”错误

本文深入探讨了在TypeScript中处理具有可选属性的联合类型时，如何有效解决“属性可能未定义”的常见错误。我们将分析为何简单的属性存在性检查不足以满足类型安全要求，并详细介绍如何通过引入判别式联合（Discriminated Unions）这一强大模式，来构建更健壮、类型更明确的代码结构，从而消除不必要的类型断言，提升代码的可读性和可维护性。

理解TypeScript中可选属性的类型推断挑战

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

在这个 getArea 函数中，尽管我们使用了 Object.hasOwn(shape, "radius") 或 "sideLength" in shape 来检查属性是否存在，TypeScript 编译器仍然会报错 ts(18048): 'shape.radius' is possibly 'undefined'.。这是因为，从 Shape 接口的定义来看，radius 和 sideLength 属性的类型被声明为 number | undefined。即使 Object.hasOwn 确认了属性的存在，TypeScript 的类型系统并不能仅凭运行时检查就自动将 shape.radius 的类型从 number | undefined 精确地收窄为 number。它只知道这个属性可能存在，但其值仍然可以是 undefined，因为它在接口中被明确标记为可选。

这种行为反映了TypeScript在处理结构化类型时的严谨性：它依赖于声明的类型定义，而非运行时可能存在的属性。

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

解决上述问题的最佳实践是采用判别式联合（Discriminated Unions）。判别式联合是一种强大的模式，它通过一个具有字面量类型的公共属性（即判别式，discriminant），来区分联合类型中的不同成员。每个成员都明确定义了它所拥有的属性，从而允许TypeScript进行更精确的类型推断。

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

无阶未来模型擂台/AI 应用平台

无阶未来模型擂台/AI 应用平台，一站式模型+应用平台

35

查看详情

type Shape =
  | {
      kind: 'circle';
      radius: number; // 明确要求圆形必须有 radius
    }
  | {
      kind: 'square';
      sideLength: number; // 明确要求正方形必须有 sideLength
    };

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

1. kind 属性是判别式，它在每个联合成员中都有一个唯一的字面量类型（'circle' 或 'square'）。
2. 当 kind 是 'circle' 时，radius 属性是必需的 number 类型。
3. 当 kind 是 'square' 时，sideLength 属性是必需的 number 类型。

这样一来，TypeScript 的控制流分析能力就能发挥作用。当我们在 if (shape.kind === "circle") 这样的条件语句中检查 kind 属性时，TypeScript 会自动将 shape 的类型收窄为 { kind: 'circle'; radius: number; }。此时，shape.radius 将被安全地推断为 number 类型，从而消除了“可能未定义”的错误。

重构 getArea 函数

使用判别式联合后，getArea 函数可以被重构为更简洁、类型更安全的形式：

function getArea(shape: Shape): number { // 返回类型不再需要 | undefined
  if (shape.kind === "circle") {
    // 在这里，TypeScript 已经知道 shape 是 { kind: 'circle'; radius: number; }
    // 因此 shape.radius 被安全地推断为 number
    return Math.PI * shape.radius**2;
  }
  else { // 此时 shape.kind 必然是 "square"
    // TypeScript 知道 shape 是 { kind: 'square'; sideLength: number; }
    // 因此 shape.sideLength 被安全地推断为 number
    return shape.sideLength**2;
  }
}

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

console.log("Circle Area:", getArea(circle)); // 输出: Circle Area: 314.1592653589793
console.log("Square Area:", getArea(square)); // 输出: Square Area: 25

在这个重构后的 getArea 函数中：

• 我们不再需要使用 Object.hasOwn 或 in 操作符来检查属性是否存在。
• 函数的返回类型也变得更明确，直接是 number，因为我们确保了每种 Shape 都有其计算面积所需的所有属性。
• 代码的逻辑更加清晰，可读性更强。

总结与最佳实践

判别式联合是TypeScript中处理具有不同结构但共享一个共同判别属性的对象的强大工具。它通过在类型层面明确不同变体的结构，使得TypeScript编译器能够进行精确的类型推断和控制流分析，从而：

1. 提升类型安全性： 避免了在访问属性时出现 undefined 的运行时错误。
2. 增强代码可读性： 类型定义清晰地表达了不同对象变体的结构。
3. 改善开发体验： 提供了更准确的自动补全和即时错误检查。
4. 简化代码逻辑： 减少了不必要的运行时属性检查。

在设计类型时，如果遇到需要根据某个属性的值来决定其他属性的存在或类型的情况，优先考虑使用判别式联合而非带有大量可选属性的单一接口。这不仅能解决“可能未定义”的错误，还能让你的TypeScript代码更加健壮和易于维护。

以上就是TypeScript类型安全：利用判别式联合处理可选属性的“可能未定义”错误的详细内容，更多请关注php中文网其它相关文章！