随着前端应用程序的复杂性和代码规模的增长，访问深层嵌套对象的代码变得越来越常见。在这样的情况下，避免在嵌套的属性和方法调用中出现空引用错误变得尤为重要。在这种情况下，TypeScript 中的可选链式调用成为了解决这个问题的最佳方式。
了解可选链式调用
在 TypeScript 中，可选链式调用是一种新的语言功能，该功能允许您访问一个可能为 null 或 undefined 的属性或方法，而不会引起任何错误或异常。更具体地说，通过在属性或方法名称后添加一个问号“?”，可选链式调用操作符会告诉 TypeScript 检查它们是否存在，如果存在，就执行对应的操作，否则返回 undefined。
下面是一个例子，说明了如何使用可选链式调用操作符来访问嵌套对象的属性：
-- -------------------- ---- -------
--------- ---- -
----- -------
----- -------
--------- -
------ -------
------ -------
--
--
----- ----- ---- - -
----- -------
---- ---
--
----- ----- - -------------------- -- ---------在这个例子中，我们定义了一个 User 接口，该接口具有一个可选的 age 属性和一个可选的 contact 属性。然后，我们创建了一个 user 对象，并使用可选链式调用操作符尝试访问 contact 对象中的 phone 属性。由于 user 对象中没有 contact 属性，因此 phone 变量将设置为 undefined。
可选链式调用的深度
可选链式调用可以是任意深度的，这意味着你可以在多层嵌套对象中使用它。在 TypeScript 中，如果您尝试访问不存在的属性或方法，系统会返回 undefined。
下面的代码演示了如何使用可选链式调用操作符来访问嵌套对象中的属性和方法：
-- -------------------- ---- -------
----- ----- ---- - -
----- -------
-------- -
------ ---------------
------ -------------------
--
--
----- ----- - --------------------- -- --------------
----- ------------- - ------------------------ -- ------
----- -------------- - --------------------------------- -- --------------
----- -------------- - ------------------------------------ -- ------------------在这个例子中，我们定义了一个嵌套对象 user，该对象具有一个 name 属性和一个 contact 对象属性，contact 对象包含 phone 和 email 属性。然后，我们使用可选链式调用操作符尝试访问 user 对象中的这些属性和方法。无论 user 对象中哪些属性不存在，这些操作都会成功完成。
避免空引用错误
使用可选链式调用操作符可以大大减少因访问 null 或 undefined 而引起的错误或异常。在使用可选链式调用操作符时，您可以保证代码将始终按预期工作，即使没有满足访问所需的所有条件。
例如，假设您有一个带有嵌套访问的复杂数据结构，如下所示：
-- -------------------- ---- -------
--------- -------- -
---------- -------
--------- -------
-------- -
--- -------
------ -
--- -------
----- -------
--------- -------
----
----
-
----- ---------- ---------- - -
-
---------- -------
--------- ------
------- -
-
--- --
------ -
-
--- --
----- -------- ---
--------- --
--
--
--
--
--
-
---------- -------
--------- --------
--
--在这个例子中，我们定义了一个带有多个嵌套属性的 Customer 接口。然后，我们创建了一个包含两个客户的数组，其中一个客户具有一个包含订单的 orders 属性，而另一个客户则没有。
如果我们想遍历所有客户的订单并输出它们的数量，我们可以使用可选链式调用操作符来避免无法访问 orders 属性所导致的错误：
customers.forEach((customer) => {
customer.orders?.forEach((order) => {
console.log(`Customer: ${customer.firstName} ${customer.lastName}, Order ID: ${order.id}, Number of items: ${order.items?.length}`);
});
});在这个例子中，我们使用 forEach 方法遍历客户数组，并在每个客户上调用一个回调函数。在回调函数中，我们使用可选链式调用操作符来尝试访问每个客户的 orders 属性，并在订单上调用 forEach 方法。无论客户是否具有订单，此操作都会成功完成，并打印每个订单的数量。
结论
在 TypeScript 中，可选链式调用操作符是一种简单易用的语言功能，可以在遍历嵌套对象的过程中显著减少代码错误和异常。通过添加一个问号“?”，您可以告诉 TypeScript 在属性或方法不存在时返回 undefined，而不是引发错误或异常。这使得您可以更轻松地编写可维护的代码，并更好地管理大型代码库。
希望这篇文章对您有所帮助。如果您有任何疑问或建议，请务必在下面的评论中提出。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67218e892e7021665e07f8a6