在 TypeScript 中，我们经常会遇到变量可能为 undefined 或 null 的情况。不正确地处理这些情况会导致一些难以调试和预测的错误。本文将介绍一些优雅的处理方式，以提高代码的可读性和可维护性。
什么是 undefined 和 null
在 TypeScript 中，undefined 和 null 都是原始值。它们代表的意义是不同的：
- undefined 表示一个变量没有被初始化的情况，或者被赋值为 undefined。
- null 表示一个变量被赋值为 null。
在 JavaScript 和 TypeScript 中，undefined 和 null 都是一种独立的类型：
- undefined 类型的变量只能被赋值为 undefined。
- null 类型的变量只能被赋值为 null。
如果不显式指定类型，TypeScript 默认将变量设为联合类型：
--- ----- ------ - ---------- --- ---- ------ - -----
优雅处理 undefined 和 null
使用可选链(?.)
可选链是一个新的语法糖，可以在链式调用中避免出现 undefined 和 null 引用的错误。如果变量为 undefined 或 null，则链式调用会直接返回 undefined，而不会触发运行时错误。
--- ------ - - ----- ------ ---- - ------ ----------- - --
-- ----
--- ----- - ------------------ -- -----------
--- ------ - ------------------- -- ---------
-- ------------
-------- -------------------- ------- -
------ -------------------------------
-使用 nullish 合并(??)
nullish 合并是另一个新的语法糖，可以在变量为 null 或 undefined 时提供默认值。
传统的默认值语法：
--- ----- - --- -- --- -- ----
使用 nullish 合并：
--- ----- - --- -- --- -- ----
明确定义类型
在 TypeScript 中，我们可以使用非空断言操作符(!)明确告诉编译器变量不会为 null 或 undefined。
--- ------- -------
-------- --------- ------- -
--------------------------------- -- ---- -- ---- - ---------
-使用类型守卫
类型守卫是一种技术，可以在运行时确定变量的类型，从而避免出现类型错误和难以调试的问题。在 TypeScript 中，我们可以使用 typeof 操作符和 instanceof 操作符来创建类型守卫。
-- ------ ---
-------- -------------- ------ - ---------- -
-- ------- --- --- --------- - -- --- - ------ --
------ ------- - - ----
- ---- -
------ ------- ----------
-
-
-- ---------- ---
----- ------ --
----- --- ------- ------ --
-------- ------------ ------ - ---------- -
-- ------- ---------- ---- - -- ------ - --- --
--------------
-
-结论
处理 undefined 和 null 的最佳实践是：
- 尽量使用可选链和 nullish 合并语法糖；
- 明确定义类型，使用非空断言来避免运行时错误；
- 使用类型守卫来确定变量的类型，从而避免出现类型错误和难以调试的问题。
这些技巧都可以使代码更加优雅、简洁、稳健和易于维护。在实际的开发过程中，我们应该根据具体的业务需求和编码风格选择适合的技术和工具。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/671b31889babaf620fa950ed