本文探讨了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类型定义中：
我们不再使用可选属性。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.1592653589793console.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，除非确实存在无法计算面积的情况。
总结与最佳实践
当您在TypeScript中处理具有不同结构但共享某些通用属性的对象集合时，判别联合是一种极其强大且优雅的解决方案。它不仅解决了可选属性带来的类型收窄问题，还带来了以下好处：
增强类型安全性： 编译器能够更准确地理解代码逻辑，在编译时捕获更多潜在的类型错误。改善可读性与可维护性： 类型定义清晰地表达了不同数据形态之间的关系，使代码意图更明确。优化开发体验： IDE能够提供更精确的自动补全和错误提示，提高开发效率。
通过将散布在接口中的可选属性重构为判别联合中每个成员的必需属性，我们能够利用TypeScript的控制流分析能力，实现更健壮、更可靠的类型检查。在设计复杂的类型结构时，优先考虑使用判别联合，能够有效避免因可选属性引起的“possibly ‘undefined’”困扰。
以上就是TypeScript中可选属性的类型收窄与判别联合的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1537403.html
微信扫一扫 
支付宝扫一扫 
