在 TypeScript 中，可选链式调用是一种非常有用的语言特性，它可以帮助我们避免在代码中出现大量的 null 或 undefined 检查，提高代码的可读性和可维护性。本文将详细介绍 TypeScript 中的可选链式调用，并通过示例代码演示其使用方法和注意事项。
什么是可选链式调用
可选链式调用是一种语言特性，它允许我们在访问对象属性或方法时，判断该属性或方法是否存在，如果存在则调用它，否则返回 undefined。在 TypeScript 中，可选链式调用使用问号符（?）来表示，例如：
const name = user?.name;
上述代码中，我们使用可选链式调用访问了 user 对象的 name 属性，如果 user 对象存在并且具有 name 属性，则返回 name 属性的值，否则返回 undefined。
可选链式调用的使用方法
在 TypeScript 中，可选链式调用可以用于访问对象属性、数组元素和方法调用等场景，具体使用方法如下：
访问对象属性
我们可以使用可选链式调用访问对象的属性，例如：
const name = user?.info?.name;
上述代码中，我们使用可选链式调用访问了 user 对象的 info 属性，如果 user 对象存在并且具有 info 属性，则继续访问 info 对象的 name 属性，否则返回 undefined。
访问数组元素
我们可以使用可选链式调用访问数组的元素，例如：
const item = list?.[0];
上述代码中，我们使用可选链式调用访问了 list 数组的第一个元素，如果 list 数组存在并且具有第一个元素，则返回该元素的值，否则返回 undefined。
调用方法
我们可以使用可选链式调用调用对象的方法，例如：
const result = user?.getName?.();
上述代码中，我们使用可选链式调用调用了 user 对象的 getName 方法，如果 user 对象存在并且具有 getName 方法，则调用该方法并返回其返回值，否则返回 undefined。
注意事项
在使用可选链式调用时，我们需要注意以下几点：
可选链式调用只能用于对象和数组
可选链式调用只能用于对象和数组，不能用于基本类型和函数等其他类型。
可选链式调用不能用于赋值操作
可选链式调用不能用于赋值操作，例如：
user?.name = 'Tom'; // 报错
上述代码中，我们使用可选链式调用给 user 对象的 name 属性赋值，但是可选链式调用不能用于赋值操作，因此会报错。
可选链式调用不能用于函数调用
可选链式调用不能用于函数调用，例如：
user?.getName()?.toUpperCase(); // 报错
上述代码中，我们使用可选链式调用调用了 user 对象的 getName 方法，并将其返回值转换为大写，但是可选链式调用不能用于函数调用，因此会报错。
示例代码
下面是一个使用可选链式调用的示例代码：
-- -------------------- ---- ------- --------- ---- - ----- ------- ----- ------- ------ - --------- ------- -- ----------- ------- - ----- ------ ---- - - ----- ------ ----- - -------- ---------- -- --------- - ------ ---------- -- -- ----- ------ ---- - - ----- -------- -- ----- --------- ------ - ------- ------- -- ------ ----- ------------ - --------------------- -- --------- ----- ------------ - --------------------- -- --------- -- ------ ----- --------- - -------------- -- ----- ----- ---------- - -------------- -- ----- ----- --------- - -------------- -- --------- -- ---- ----- --------- - ------------------- -- ----- ----- --------- - ------------------- -- ---------展开代码
上述代码中，我们定义了一个 User 接口，包含了 name、age、info 和 getName 四个属性。然后我们定义了两个 User 对象 user1 和 user2，以及一个 User 数组 userList，用于演示可选链式调用的使用方法。
在示例代码中，我们使用了可选链式调用访问了 user1 和 user2 对象的 info 属性和 getName 方法，并使用可选链式调用访问了 userList 数组的第一个元素。通过这些示例，我们可以看到可选链式调用的使用方法和注意事项。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d557f3a941bf71349e527d
