在前端开发中，我们经常会遇到处理 undefined 或 null 的情况。这些情况可能是因为数据来源不稳定，或者是因为代码逻辑复杂，导致某些属性或方法可能不存在。在 JavaScript 中，我们通常需要使用繁琐的 if 判断或者三目运算符来处理这些情况。但是在 TypeScript 中，我们可以使用可选链式调用来优雅地处理这些情况。
可选链式调用的概念
可选链式调用是 TypeScript 3.7 中新增的语法特性，它可以用于优雅地处理可能为 undefined 或 null 的属性或方法。在使用可选链式调用时，我们可以使用 ?. 运算符来代替 . 运算符，这样如果属性或方法不存在，就会返回 undefined，而不会抛出错误。
可选链式调用的使用
下面是一个使用可选链式调用的示例代码：
// javascriptcn.com 代码示例
interface Person {
name?: string;
age?: number;
address?: {
city?: string;
street?: string;
};
}
const person: Person = {
name: '张三',
age: 20,
};
const city = person.address?.city;
console.log(city); // undefined在上面的代码中，我们定义了一个 Person 接口，其中包含了一个 address 属性。我们使用可选链式调用来获取 address 属性的 city 属性，即使 address 属性不存在，也不会报错，而是返回 undefined。
可选链式调用的嵌套使用
可选链式调用还可以嵌套使用，用于处理多层嵌套的对象或数组。下面是一个嵌套使用的示例代码：
// javascriptcn.com 代码示例
interface Person {
name?: string;
age?: number;
address?: {
city?: string;
street?: string;
zipCode?: string;
};
}
const person: Person = {
name: '张三',
age: 20,
address: {
city: '北京',
street: '朝阳区',
},
};
const zipCode = person.address?.zipCode;
console.log(zipCode); // undefined
const streetLength = person.address?.street?.length;
console.log(streetLength); // 3在上面的代码中，我们使用了两次可选链式调用。第一次是获取 address 属性的 zipCode 属性，由于 address 属性存在，但是 zipCode 属性不存在，所以返回了 undefined。第二次是获取 address 属性的 street 属性的 length 属性，由于 address 和 street 属性都存在，所以返回了 street 属性的长度。
可选链式调用的注意事项
在使用可选链式调用时，需要注意以下几个问题：
- 可选链式调用只适用于对象或数组的属性或方法，不能用于基本类型。
- 可选链式调用的返回值是可能为 undefined 的，需要进行判断。
- 可选链式调用不能用于赋值操作，因为它的返回值可能为 undefined，不能被赋值给变量或属性。
总结
在 TypeScript 中，可选链式调用是一种优雅地处理 undefined 或 null 的方式。它可以用于处理对象或数组的属性或方法，可以嵌套使用，但需要注意返回值可能为 undefined 的情况。在实际开发中，我们可以使用可选链式调用来简化代码，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650e6e8395b1f8cacd796efe