概述

在 TypeScript 中，有两个常用的操作符 “!” 和 “?.”，用于处理对象属性的访问和空值（null 或 undefined）的处理。虽然这两个操作符看起来相似，但在使用时有着不同的行为和应用场景。本文将深入解析 TypeScript 中的 “!” 和 “?.” 操作符的区别。

文章目录

概述"!" 非空断言操作符"?."可选链操作符总结

“!” 非空断言操作符

“!” 用于在对象属性访问时，告诉 TypeScript 该属性一定存在，不会为 null 或 undefined。这样可以告诉 TypeScript 忽略可能的空值检查，将属性视为非空。例如：

const obj = { foo: "bar" };

// 使用非空断言操作符，告诉 TypeScript 属性一定存在

const value = obj.foo!; // 这里使用了 "!" 断言 foo 属性一定存在

console.log(value); // 输出：bar

需要注意的是，如果使用了 “!” 操作符，但实际上属性为 null 或 undefined，会导致运行时错误。因此在使用 “!” 断言时要确保属性确实存在，避免空指针错误。

“!” 操作符在以下情况下常常使用：

当开发者明确知道属性一定存在，且希望 TypeScript 忽略可能的空值检查时。当对已经经过空值检查的属性进行再次访问时，避免TypeScript 报错。

"?."可选链操作符

“?.” 操作符用于在对象属性访问时，进行安全的空值检查，避免访问 null 或 undefined 时的错误。例如：

const obj = { foo: { bar: "baz" }};

// 使用可选链操作符，安全访问属性

const value = obj.foo?.bar; // 这里使用了 "?." 进行安全访问

console.log(value); // 输出：baz

// 当 foo 属性不存在时，不会抛出错误，而是返回 undefined

const value2 = obj.bar?.baz;

console.log(value2); // 输出：undefined

“?.” 操作符在访问嵌套属性时也可以使用，它会一直进行安全的空值检查，直到找到最终的属性或遇到 null 或 undefined 为止。

“?.” 操作符在以下情况下常常使用：

当访问对象的嵌套属性时，希望进行安全的空值检查，避免访问不存在的属性导致的错误。当不确定属性是否存在，希望在属性可能为 null 或 undefined 时避免报错。

总结

“!” 操作符用于非空断言操作，告诉 TypeScript 属性一定存在，但需要谨慎使用，以避免空指针错误。“?.” 操作符用于可选链操作，进行安全的空值检查，避免访问 null 或 undefined 时的错误，特别适用于访问嵌套属性时。在实际开发中，根据具体场景和需求选择使用 “!” 或 “?.” 操作符，并遵循最佳实践，确保代码的质量和稳定性。

好文链接

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：