非空断言！和？

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

在观看一些代码的时候碰到的一些疑惑🤔️

一、非空断言

对于那些可能为空的变量（即可能等于undefined或null），TypeScript 提供了非空断言，保证这些变量不会为空，写法是在变量名后面加上感叹号!。

二、例

1.！用法

当你在值后使用 ! 时，你告诉 TypeScript，你知道这个值不是 null 或 undefined，尽管编译器无法证明。

let x: string | null = null;
console.log(x!); // 错误：不能访问 null 的属性（属性 'length' 在类型 'null' 上不存在）

let y: string = 'hello';
console.log(y!); // okay，TypeScript 知道 y 不是 null 或 undefined

let z: string | null = 'hello';
console.log(z!); // okay，TypeScript 知道 z 不是 null 或 undefined

在第一个示例中，x 声明为字符串或 null，并且初始化为 null。 cuando 我们尝试访问 x 的 length 属性，TypeScript 抛出错误，因为它知道 x 可能是 null。

在第二个示例中，y 声明为字符串，并且初始化为字符串值。 cuando 我们使用 ! 后缀 y，TypeScript 知道 y 不是 null 或 undefined，所以可以访问其属性。

在第三个示例中，z 声明为字符串或 null，但它初始化为字符串值。 quando 我们使用 ! 后缀 z，TypeScript 知道 z 不是 null 或 undefined，所以可以访问其属性。

! 符号在你工作于数据时非常有用，这些数据你知道不是 null 或 undefined，但编译器无法证明。然而，请小心使用 ! 符号，因为如果你错误地认为值是 null 或 undefined，你将得到运行时错误。

2.？用法

当你使用 ?. 后缀访问属性或方法时，你告诉 TypeScript，这个属性或方法可能是 null 或 undefined，你想访问它的值或调用它，而不抛出错误如果它是 null 或 undefined。

interface Person {
  name: string;
  address?: {
    street: string;
    city: string;
  };
}

let person: Person = { name: 'John' };
console.log(person?.address?.street); // 输出：undefined

let person2: Person = { name: 'Jane', address: { street: '123 Main St', city: 'Anytown' } };
console.log(person2?.address?.city); // 输出："Anytown"

在第一个示例中，person 有一个可选的 address 属性（即，它可能是 null 或 undefined）。当我们使用 ?. 访问 address 的 street 属性时，TypeScript 知道 address 可能是 null 或 undefined，所以它不会抛出错误如果它是 null 或 undefined。相反，它 simply 返回 undefined。

在第二个示例中，person2 有一个 address 属性不是 null 或 undefined。当我们使用 ?. 访问 address 的 city 属性时，TypeScript 知道 address 不是 null 或 undefined，所以它返回 city 属性的值。

? 符号在你工作于数据时非常有用，这些数据可能是 null 或 undefined，你想访问它的属性或方法而不抛出错误。它也非常有用，当你工作于可选的属性或方法，它们可能不总是存在。

需要注意的是，? 符号只用于属性访问和方法调用，不用于变量赋值。例如：

let x: string | null = null;
x?.toString(); // 错误：不能将值赋给 'x'，因为它是 null

在这个示例中，我们尝试使用 ?. 操作符将值赋给 x，这不是允许的相反，我们应该使用 || 操作符提供默认值如果 x 是 null 或 undefined。

总结