TypeScript中的可选链操作符介绍

在 TypeScript 中，可选链操作符（Optional Chaining Operator）是一种方便且可读性高的语法，用于简化在访问对象的属性或者调用方法时进行空值检查的过程。可选链操作符是 ECMAScript 提案的一部分，TypeScript 从 3.7 版本开始支持可选链操作符。

什么是可选链操作符？

可选链操作符 ?. 帮助我们避免在访问对象属性或者调用方法时出现的空指针异常。当我们需要访问对象的嵌套属性或者方法时，使用可选链操作符可以减少代码冗余，并且让代码逻辑更加清晰。

在 TypeScript 中使用可选链操作符可以避免在访问属性或者调用方法时出现的 null 或 undefined 异常。

例如，我们有一个对象 user，其中包含了 name 和 address 两个属性，而 address 属性又包含了 street 和 city 两个属性：

const user = {
  name: "Alice",
  address: {
    street: "123 Main St",
    city: "New York"
  }
};

现在假设我们要获取用户的城市信息，我们可以使用可选链操作符来避免空指针异常：

const city = user?.address?.city;

在上面的代码中，通过在属性 user 后面添加 ?.，我们就可以安全地访问 address 对象的 city 属性。如果 user 或 address 的值为 null 或 undefined，那么 city 将被赋值为 undefined 而不是抛出异常。

与条件运算符 . 不同，可选链操作符 ?. 会自动停止表达式的运行，并返回 undefined。这与使用条件运算符 . 时需要手动进行空值检查的过程相比，极大地简化了代码。

例如，在没有使用可选链操作符的情况下，我们需要手动检查每个属性：

const city = user && user.address && user.address.city;

而在使用可选链操作符后，只需要一行代码即可完成属性访问：

const city = user?.address?.city;

除了访问属性，可选链操作符还可以安全地调用对象的方法。

例如，我们有一个对象 person，其中包含了一个 sayHello 的方法：

const person = {
  name: "Bob",
  sayHello: () => console.log("Hello!")
};

现在假设我们不确定 person 是否存在，我们可以使用可选链操作符安全地调用该方法：

person?.sayHello?.();

在上面的代码中，如果 person 或者 sayHello 的值为 null 或 undefined，那么方法调用将被忽略，不会抛出异常。

可选链操作符是 TypeScript 中一种很有用的语法，它简化了访问对象属性或者调用方法时进行空值检查的过程。通过使用可选链操作符，我们可以减少代码冗余，并且让代码逻辑变得更加清晰。当我们不确定一个对象是否存在时，可选链操作符是一种非常方便和安全的选择。