TypeScript中 “!“ 和 “?.“ 的区别

概述

在 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 时的错误，特别适用于访问嵌套属性时。
• 在实际开发中，根据具体场景和需求选择使用 “!” 或 “?.” 操作符，并遵循最佳实践，确保代码的质量和稳定性。

代码007普通

打赏 收藏 海报 链接