在前端开发中，我们经常会遇到 null 和 undefined 的情况。在 JavaScript 中，这两个值是特殊的值，分别代表值不存在和值未定义。如果我们不注意处理它们，就会导致程序出错。在 TypeScript 中，为了避免这种情况，我们需要使用一些技巧来优雅地处理 null 和 undefined。
null 和 undefined 的区别
在了解如何处理 null 和 undefined 之前，我们需要先了解它们的区别。在 JavaScript 中，null 表示一个空对象指针，它是一个特定的对象引用，而 undefined 则表示一个未定义的值。以下是一些示例代码：
let n: null = null; let u: undefined = undefined; console.log(typeof(n)); // 输出"object" console.log(typeof(u)); // 输出"undefined" console.log(n === u); // 输出"false" console.log(n == u); // 输出"true"
在上面的代码中，我们定义了两个变量 n 和 u，分别赋值为 null 和 undefined。然后我们使用 typeof 操作符来判断它们的类型，发现 null 的类型是 object，而 undefined 的类型是 undefined。另外，我们还可以注意到，null 和 undefined 在使用双等号进行比较时，会返回 true，但使用三个等号进行比较时，会返回 false。
可选链操作符
在 TypeScript 中，我们可以使用可选链操作符 ?. 来处理可能为 null 或 undefined 的值。它的语法非常简单，只需要在需要进行属性或方法调用的地方加上 ?. 即可。以下是一些示例代码：
-- -------------------- ---- -------
--------- ------ -
----- -------
----- -------
----------- -----
-
--- ------- ------ - -
----- -----
-------- ---------- -
---------------------------- ----------------
-
-
-------------------------------- -- -- ------ -------------
----------------------------------- -- -- -----------在上面的代码中，我们定义了一个 Person 接口，它包含一个 name 属性、一个可选的 age 属性和一个可选的 getInfo 方法。然后我们定义了一个名为 person 的对象，它包含一个 name 属性和一个 getInfo 方法。接着我们使用可选链操作符 ?. 来调用 getInfo 方法和 age 属性，如果它们不存在，会返回 undefined。
非空断言操作符
在 TypeScript 中，我们还可以使用非空断言操作符 ! 来表示一个值不会为 null 或 undefined，可以放心地进行方法或属性的调用。它的语法很简单，只需要在变量或属性名后面加上 ! 即可。以下是一些示例代码：
-- -------------------- ---- -------
--------- ------ -
----- -------
----- -------
---------- -----
-
--- ------- ------ - -
----- -----
--------- -
---------------------------- ----------------
-
-
----------------------------------- -- -- ------- ---- -------- --------- -- ----------
------------------ -- -- ------ -------------在上面的代码中，我们定义了一个 Person 接口，它包含一个 name 属性、一个可选的 age 属性和一个 getInfo 方法。然后我们定义了一个名为 person 的对象，它包含一个 name 属性和一个 getInfo 方法。接着我们使用非空断言操作符 ! 来调用 getInfo 方法和 age 属性，如果它们不存在，会抛出异常。
类型守卫
在 TypeScript 中，我们还可以使用类型守卫来判断一个值是否为 null 或 undefined。它的语法是通过类型断言和 if 语句来实现的。以下是一些示例代码：
-- -------------------- ---- -------
--------- ------ -
----- -------
----- -------
---------- -----
-
--- ------- ------ - -
----- -----
--------- -
---------------------------- ----------------
-
-
-- ----------- --- --------- -- ---------- --- ----- -
---------------------------------- -- -- ------- ---- -------- --------- -- ----------
-
-- --------------- ---------- --------- -
-----------------
-在上面的代码中，我们定义了一个 Person 接口，它包含一个 name 属性、一个可选的 age 属性和一个 getInfo 方法。然后我们定义了一个名为 person 的对象，它包含一个 name 属性和一个 getInfo 方法。接着我们使用 if 语句和类型守卫来判断 age 和 getInfo 是否存在，如果存在，就可以放心地进行方法或属性的调用。
总结
本文介绍了 TypeScript 中如何优雅地处理 null 和 undefined。我们使用了可选链操作符、非空断言操作符和类型守卫，来避免程序出错。相信通过本文的学习，您已经了解了这些技术的知识和应用场景，可以更加自信地在 TypeScript 中处理 null 和 undefined 了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649178e348841e9894f7ed0d