TypeScript 中的 ! 和 ? 操作符

在 TypeScript 中，! 和 ? 是两个非常重要且常用的操作符，分别用于非空断言 和可选链操作。下面简单介绍一下二者。

1. 非空断言操作符 !

1.1 含义

非空断言操作符 !（Non-null assertion operator）用来告诉 TypeScript 编译器，**某个值在当前情况下绝对不是 null 或 undefined，**即使 TypeScript 的类型系统无法推断这一点。这会绕过 TypeScript 的类型检查，直接断言该值不是 null 或 undefined。

🌰

TypeScript 复制代码

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

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

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

这里，user.address! 告诉 TS user.address 一定有值，因此可以安全地调用 .length。如果 user.address 真的为 undefined，就会抛出运行时错误。

TypeScript 复制代码

const singleRef = ref();

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

这里 ! 告诉 TS，尽管 singleRef.value 可能是 null 或 undefined，但确定在调用 openDialog 时一定是有值的，因此跳过类型检查。

1.2 适用场景

当确信某个值不会是 null 或 undefined，并且 TypeScript 编译器无法推断出这一点时，可以使用 ! 告知 TS 该值运行时肯定存在。
在某些情况下，可能是外部库的 API 或代码中的某些逻辑导致 TS 无法推断出某个值的类型，可以使用 ! 强制该值不是 null 或 undefined。

1.3 注意事项

1）过度使用 ! 会让 TypeScript 类型系统失去意义，这可能会在运行时导致错误。因为强行告诉 TypeScript 这个值不会是 null 或 undefined，但实际上可能是，这会导致潜在的运行时错误。

2）谨慎使用 ，只有在非常确定值不会为 null 或 undefined 的情况下使用。

2. 可选链操作符 ?

2.1 含义

可选链操作符 ?（Optional chaining operator）允许我们安全地访问一个对象的属性或方法，而不必担心中间某一环节为 null 或 undefined。如果对象的某个部分为 null 或 undefined，则表达式会短路并返回 undefined，而不会抛出错误。

🌰

TypeScript 复制代码

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。

TypeScript 复制代码

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 代码时都非常有用，可以帮助我们写出更健壮的代码。