TypeScript 中的非空断言 (!) 与可选链 (?) 操作符详解

在 TypeScript 开发中，! 和 ? 是两个高频使用的操作符，分别对应非空断言和可选链功能。下文将详细阐述两者的具体用法与区别。

1. 非空断言操作符 !

1.1 含义

非空断言操作符（Non-null assertion operator）用于向 TypeScript 编译器声明：在特定上下文中，该值绝非 null 或 undefined，即便类型系统无法自动推断。此举会跳过类型检查，强制断言该值存在。

🌰

let user = {
  name: 'Alice',
  age: 25
};

// TypeScript 会认为 user.address 可能是 undefined，因为它没有在 user 对象中定义

// 使用非空断言，告诉 TypeScript 我确信 user.address 存在，可以强制将其视为有效的对象。
console.log(user.address!.length);

例如，user.address! 明确告知 TypeScript 该属性必有值，从而允许安全调用 .length。若 user.address 实际为 undefined，程序将在运行时抛出错误。

const singleRef = ref();

const open = () => {
  singleRef.value!.openDialog();
};

此处 ! 指示 TypeScript，尽管 singleRef.value 可能为 null 或 undefined，但在调用 openDialog 时其值必然存在，因此跳过类型检查。

1.2 适用场景

- 当开发者确信某值不会为 null 或 undefined，且 TypeScript 编译器无法自动推断时，可使用 ! 明确告知编译器该值在运行时必然存在。

- 某些情况下，由于外部库 API 或特定代码逻辑导致 TypeScript 无法推断类型，此时可使用 ! 强制指定该值非 null 或 undefined。

1.3 注意事项

1）过度依赖 ! 会削弱 TypeScript 类型系统的保护作用，可能引发运行时错误。若强行断言值非空而实际为空，将导致潜在的程序崩溃。

2）务必谨慎使用，仅在极其确定值不会为 null 或 undefined 时才使用此操作符。

2. 可选链操作符 ?

2.1 含义

可选链操作符（Optional chaining operator）允许安全访问对象属性或方法，无需担心中间环节为 null 或 undefined。若链中某部分为 null 或 undefined，表达式将短路并返回 undefined，而非抛出错误。

🌰

const user = {
  name: 'Alice',
  address: {
    city: 'New York'
  }
};

// 使用可选链操作符安全访问
console.log(user.address?.city); // "New York"

// 连续链式调用
const length = user.address?.street?.length; // undefined，而不是抛出错误
console.log(length); // undefined

例如，user.address?.city 可安全访问 address 属性。即使 user.address 为 undefined，也不会报错，而是直接返回 undefined。

const singleRef = ref();

const open = () => {
  singleRef.value?.openDialog();
};

此处 ? 表示若 singleRef.value 为 null 或 undefined，则不执行 openDialog 方法调用，而是返回 undefined，从而避免错误抛出。

2.2 适用场景

- 访问深层嵌套属性且不确定中间属性是否存在时，使用 ? 可防止因访问 null 或 undefined 属性而引发的错误。

- 当调用方法或访问属性时，若对象或其部分属性可能为 null 或 undefined，可选链操作符能有效避免报错。

2.3 注意事项

1）可选链操作符虽能防止错误，但不提供默认值。如需返回默认值，可结合 ??（空值合并操作符）使用。

2）若属性链中任一部分为 null 或 undefined，后续访问将停止，结果为 undefined，不会抛出异常。若属性存在，则继续访问链式属性。这能有效避免因访问未定义属性导致的运行时错误，尤其在处理不确定或动态结构数据时极具价值。

3. 总结 ! 和 ?

3.1 作用不同

- ! 为非空断言，告知 TypeScript 确定某值不为空，可绕过类型检查，但其本身不处理 null 或 undefined 的问题。

- ? 为可选链操作符，用于安全访问对象属性或方法，避免抛出错误，自动处理 null 或 undefined 的情况。

3.2 使用场景

- ! 适用于非常确定某值不为 null 或 undefined 的场景，属于强制断言，要求开发者对代码有明确信心保证。

- ? 适用于不确定某值是否存在，旨在安全访问嵌套属性或方法的场景。

3.3 性能考虑

- 使用 ! 时，TypeScript 会跳过类型检查，但运行时仍可能抛出异常，因此不提供运行时安全性。

- 使用 ? 时，TypeScript 会在运行时检查值是否为 null 或 undefined，并返回 undefined，从而避免报错。

这两个操作符在编写 TypeScript 代码时极具价值，有助于构建更健壮的代码。

本文介绍了 TypeScript 中 ! 和 ? 操作符的核心用法。如需了解更多相关内容，请搜索本站往期文章或继续阅读后续文章。感谢支持！