TypeScript 可选链
前言
TypeScript 是一种由 Microsoft 开发的开源编程语言，它是 JavaScript 的一个超集，增加了类型注解和其他静态类型检查能力。TypeScript 通过在编译时进行静态类型检查，能够在开发阶段发现潜在的错误，提高开发效率和代码质量。
在 TypeScript 4.0 中，引入了可选链（Optional Chaining）操作符，这个新的特性可以简化代码中的属性和方法的访问，避免了繁琐的空值判断和异常处理。
本文将介绍 TypeScript 可选链的基本语法和用法，并通过示例代码详细说明其应用场景和优势。
可选链的基本语法
可选链操作符（?.）的作用是在访问属性或调用方法时，判断该属性或方法是否存在，如果存在则访问或调用，如果不存在则返回 undefined。它的写法和点操作符（.）类似，但在属性或方法不存在时不会抛出错误。
下面是可选链的基本语法：
object?.property
object?.method()
其中，object 表示要访问的对象，property 表示对象的属性，method() 表示对象的方法。
可选链的应用场景
可选链的主要应用场景是在访问对象的属性和调用对象的方法时，对对象是否为 null 或 undefined 进行判断，避免因为对象不存在而导致的异常。
访问对象属性
在访问对象属性时，使用可选链操作符可以避免繁琐的空值判断。例如：
interface User {
name: string;
age?: number;
}
const user: User = {
name: 'Alice'
};
const userName = user?.name; // "Alice"
const userAge = user?.age; // undefined
在上面的例子中，user 对象中定义了 name 属性，但没有定义 age 属性。通过可选链操作符，我们可以直接访问 user 对象的 name 和 age 属性，即使 age 不存在也不会报错。
调用对象方法
在调用对象方法时，使用可选链操作符可以避免因为对象不存在而导致的异常。例如：
type Calculator = {
add(a: number, b: number): number;
subtract(a: number, b: number): number;
}
const calculator: Calculator | null = getCalculator();
const sum = calculator?.add(1, 2); // 如果 calculator 存在，则返回计算结果；否则返回 undefined
在上面的例子中，getCalculator() 函数返回一个 Calculator 类型的对象或 null。通过可选链操作符，我们可以直接调用 add 方法，即使 calculator 为 null，也不会报错。
可选链与空值合并运算符
可选链和空值合并运算符（??）是 TypeScript 4.0 引入的两个新特性，它们可以组合使用，更方便地处理空值。
空值合并运算符的作用是在左侧运算符为 null 或 undefined 时，返回右侧的值。例如：
const name = user?.name ?? 'Unknown';
在上面的例子中，如果 user 对象存在 name 属性，则返回 user.name，否则返回 'Unknown'。
可选链和类图
下面是一个简单的类图，展示了可选链的应用场景和优势：
classDiagram
class Person {
- name: string
- age?: number
}
Person ..> User
Person *-- Calculator
总结
TypeScript 可选链是一种简化代码的新特性，可以在访问对象属性和调用对象方法时，对对象是否为 null 或 undefined 进行判断，避免异常情况的发生。它与空值合并运算符一起使用，可以更方便地处理空值。
通过这篇文章的介绍，我们了解了 TypeScript 可选链的
