可选链在 TypeScript 中是如何工作的？

可选链是一种 JavaScript 和 TypeScript 中的新语法，使得对深度嵌套的属性和方法的访问变得更加简单和方便。它可以避免在属性或方法不存在的情况下引起的异常或错误。

可选链的基本语法

在 TypeScript 中，可选链使用问号（?）来表示。具体来说，如果你想访问一个可能不存在的属性或方法，你可以使用可选链处理它：

const person: {
  name: string;
  age?: {
    current: number;
    max?: number;
  };
} = {
  name: 'John',
};

const age = person.age?.current; // age = undefined
const maxAge = person.age?.max; // maxAge = undefined

在上面的示例中，我们将一个包含 name 和 age 属性的对象分配给了一个变量 person。但是，我们并没有为 age 属性提供一个完整的定义。由于 age 是可选的，我们使用了可选链来访问它的子属性 current 和 max。

可选链和更好的类型安全

使用可选链的另一个好处是它可以让你代码更加安全和可读。你可以避免手动进行类型检查，而是让 TypeScript 自己推断出代码执行的类型：

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

function getAddress(person: Person) {
  return person.address?.street || 'N/A';
}

const person: Person = {
  name: 'Mary',
};
console.log(getAddress(person)); // output: N/A

在上面的代码中，我们定义了一个接口 Person 并声明一个函数 getAddress 用来获取具有 Person 类型的对象的地址信息。在函数中，我们使用可选链来访问 address 对象及其属性。如果 address 不存在或没有 street 属性，函数就会返回 'N/A'。我们可以在调用 getAddress 函数之前对 person 变量进行类型检查，以确保它符合 Person 接口。

后续断言

可选链还支持后续断言（Postfix Assertions），它允许你在调用方法之前使用 ! 表示这个方法一定存在，从而解决 TypeScript 类型推断错误的问题。例如：

interface Plan {
  name: string;
  description?: string;
  price?: {
    amount: number;
    currency: string;
  };
}

const silverPlan: Plan = {
  name: 'Silver',
  description: 'Basic plan',
};

const priceAmount: number = silverPlan.price!.amount; // Throws runtime error if `price` is not present

在上面的代码中，我们定义了一个名为 Plan 的接口，并创建了一个 silverPlan 对象，没有为 Plan 接口中的 price 属性提供一个完整的定义。但是，我们在访问 price 对象和 amount 属性时，使用了后续断言来确保这些属性一定存在。如果 price 不存在或者没有 amount 属性，那么 TypeScript 将会抛出一个运行时错误。

总结

可选链是一种非常有用的 JavaScript 和 TypeScript 语法。它让我们能够更轻松地访问深度嵌套的属性和方法，同时也可以提高代码的可读性和类型安全性。你可以在你的 TypeScript 项目中使用可选链，享受其中的好处。