TypeScript中的可选链
在本文中，我们将讲解TypeScript中的可选链。
YouTube Video
TypeScript中的可选链
TypeScript中的可选链是一种用于访问深层嵌套对象或数组属性的实用功能。该功能在访问不存在的属性时可以防止错误，从而使您能够编写简洁且易于阅读的代码。
什么是可选链？
可选链操作符 (?.) 在访问不存在的对象属性或方法时会返回 undefined。这使得代码即使在属性不存在的情况下也能继续运行而不会抛出错误。
例如，当使用常规方法访问以下嵌套对象的属性时，如果该属性不存在，将会发生错误。
示例
1interface User {
2 name?: string;
3 address?: {
4 city?: string;
5 postalCode?: string;
6 };
7}
8
9const user: User = {
10 name: 'Alice'
11};
12
13// Normal access
14console.log(user.address.postalCode); // Error: Cannot read property 'postalCode' of undefined
- 在这种情况下，如果
address不存在，将会发生错误。可选链可以用来防止这种情况。
使用可选链的示例
1interface User {
2 name?: string;
3 address?: {
4 city?: string;
5 postalCode?: string;
6 };
7}
8
9const user: User = {
10 name: 'Alice'
11};
12
13console.log(user.address?.postalCode); // undefined
- 使用可选链可以避免错误，并在属性不存在时返回
undefined。
如何使用可选链
可选链可以应用于多种场景，例如属性访问、函数调用和数组访问。我们将逐一解释如何使用这些场景中的可选链。
访问属性
您可以安全地访问对象的嵌套属性。
1interface Company {
2 name: string;
3 location?: {
4 city?: string;
5 country?: string;
6 };
7}
8
9const company: Company = {
10 name: 'Tech Corp',
11 location: {
12 city: 'New York'
13 }
14};
15
16console.log(company.location?.city); // 'New York'
17console.log(company.location?.country); // undefined
此代码使用可选链操作符，仅在 company 对象存在 location 属性时访问 city 和 country 属性。
函数调用
可选链还可以在调用函数前检查函数是否存在。
1interface User {
2 name?: string;
3 greet?: () => void;
4}
5
6const user: User = {
7 name: 'Bob',
8 // greet is undefined
9};
10
11// Check if the function exists before calling it
12user.greet?.(); // The call is not made, and no error occurs
此代码使用可选链操作符，仅在 greet 函数存在时安全地调用它。即使该函数未定义，也不会发生错误。
数组访问
可选链可以应用于数组以检查元素是否存在。
1interface Team {
2 members?: string[];
3}
4
5const team: Team = {
6 members: ['Alice', 'Bob', 'Charlie']
7};
8
9console.log(team.members?.[0]); // 'Alice'
10console.log(team.members?.[5]); // undefined
此代码仅在 team.members 存在时访问数组元素，对于存在的索引返回值，对于不存在的索引返回 undefined。
可选链操作符与空值合并操作符
可选链返回的是undefined，但有时这并不够用。在这种情况下，TypeScript 3.7 引入的空值合并操作符（??）可以为 null 或 undefined 提供默认值。
1interface User {
2 name?: string;
3 address?: {
4 city?: string;
5 postalCode?: string;
6 };
7}
8
9const user: User = {
10 name: 'Carol'
11};
12
13// Use 'Unknown' as the default value if name does not exist
14const userName = user.name ?? 'Unknown';
15
16console.log(userName); // 'Carol'
结合可选链时，您可以编写更灵活的代码。
1console.log(user.address?.postalCode ?? 'Not provided'); // 'Not provided'
使用可选链时的注意事项
在使用可选链操作符时，务必要注意以下几点：。
-
不必要地使用可选链操作符
- 在保证存在的属性或方法上使用可选链操作符会让你的代码变得不必要地冗长。最好仅在访问目标是否存在不确定时使用。
-
拼写错误
- 过度使用可选链操作符可能导致拼写错误难以被发现，从而访问了意外的属性。执行适当的类型检查并谨慎使用。
代码摘要
1interface User {
2 name?: string;
3 address?: {
4 city?: string;
5 postalCode?: string;
6 };
7}
8
9const user: User = {
10 name: 'Alice',
11 address: {
12 city: 'Tokyo'
13 }
14};
15
16// Example of optional chaining
17console.log(user.address?.city); // 'Tokyo'
18console.log(user.address?.postalCode); // undefined
19
20// Using optional chaining combined with nullish coalescing
21console.log(user.address?.postalCode ?? 'Not provided'); // 'Not provided'
总结
TypeScript 中的可选链提供了简洁的代码，同时避免了访问深层嵌套对象或数组时的错误。此外，将其与空值合并操作符结合使用可以设置默认值并创建更灵活的逻辑。在适当使用的情况下，它可以显著提高代码的安全性和可读性。
您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。