在前端开发中，我们常常需要从嵌套的对象或数组中取出数据，但在大量数据中寻找所需的信息往往是一项困难的任务。为了解决这个问题，ES11 提供了一种新的特性——Optional Chaining，它可以用来简化合并或访问嵌套对象属性的代码。
在本文中，我们将讨论如何在 TypeScript 中使用 Optional Chaining，并介绍如何使用类型保护来增强代码的可读性和可维护性。
Optional Chaining
Optional Chaining 翻译为“可选链”，这意味着如果我们想要访问一个不存在的属性或方法，我们可以使用 Optional Chaining 运算符（?.）来避免出现 TypeError 错误。
下面是一个简单的例子：
const user = {
name: 'Tom',
age: 25,
pet: {
type: 'dog',
name: 'Max',
}
};
console.log(user.pet?.name); // Max
console.log(user.address?.city); // undefined在上面的代码中，我们使用了 ?. 运算符来避免尝试访问一个不存在的属性。当 pet 属性存在时，我们可以访问到 name 属性。而在访问不存在的 address 属性时，返回的是 undefined 而不是错误。
TypeScript 中的 Optional Chaining
在 TypeScript 中，我们可以使用 Optional Chaining 来避免当我们访问某些属性或方法时出现类型错误或代码坏掉的问题。但是，由于 TypeScript 无法理解 Optional Chaining 运算符，需要通过类型保护来帮助 TypeScript 在编译时检查代码。
我们可以通过类型保护来确定某些属性或方法是否存在，从而避免在运行时出现错误。下面是一个示例：
interface IUser {
name: string;
age: number;
pet?: IPet;
}
interface IPet {
type: string;
name: string;
}
function getPetName(user: IUser): string | undefined {
if (user.pet === undefined) {
return undefined;
}
return user.pet.name;
}
const userWithName = {
name: 'Tom',
age: 25,
pet: {
type: 'dog',
name: 'Max',
}
};
const userWithoutName = {
name: 'Jerry',
age: 27,
pet: {
type: 'cat',
}
};
console.log(getPetName(userWithName)); // Max
console.log(getPetName(userWithoutName)); // undefined在上面的代码中，我们定义了一个 IUser 接口和一个 IPet 接口。然后，我们定义了一个 getPetName 函数，该函数可以获取用户宠物的姓名。该函数的返回类型为 string 或 undefined。
接下来，我们定义了两个用户对象 userWithName 和 userWithoutName。这两个用户对象都有一个 pet 属性，但其中一个 pet 属性可能没有 name 属性。
我们将这两个对象传递给 getPetName 函数，根据 pet 属性是否存在，函数将返回字符串或 undefined。
在访问 user.pet.name 属性时，由于 pet 属性可能不存在，我们需要通过类型保护来帮助 TypeScript 在编译时检查代码。在本例中，我们使用了 if (user.pet === undefined) 来确保 pet 属性存在。
通过这种方式，我们可以避免在运行时出现错误，并通过编译器获得更好的类型检查。
总结
本文讨论了 Optional Chaining 的用法和在 TypeScript 中使用 Optional Chaining 的步骤，以及如何使用类型保护来增强代码的可读性和可维护性。通过这些技术，我们可以避免在运行时出现错误，并获得更好的类型检查。在实际的开发中，我们应该根据具体情况选择最适合的技术。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b846e5add4f0e0ff0cd18d