介绍
在 JavaScript 中，null 和 undefined 通常被用作表示对象或变量不存在或未被赋值的情况。但是，它们类型的区别在 TypeScript 中变得更加明显。
TypeScript 是一个用于编写类型安全代码的 JavaScript 超集。因此，在 TypeScript 中，null 和 undefined 有着不同的含义和使用方式。在这篇文章中，我们会深入理解这两种类型的异同点，并说明它们在 TypeScript 中的应用。
null 和 undefined 类型
在 TypeScript 中，null 和 undefined 是两种基本数据类型。它们表示的含义是：
- null：表示变量或对象已被明确地赋值为空值；
- undefined：表示变量或对象已被声明，但未被赋值或初始化。
TypeScript 中对于这两种类型的运用方式有以下几种：
可选参数和可选属性
在 JavaScript 中，函数和对象的参数和属性都是可以不传值的。然而，在 TypeScript 中，对于这些可能不传值的参数和属性，我们需要使用 ? 来设置。
--------- ----------- - ----- ------- ----- ------- - -------- --------------- ------------- ---- - ------------------ --------------- ----------------- ---------- -- ------------- - ----------- ----- ------- --- -- ----- ------ ---- ------- ----------- ----- ------ ---- -- --- -- ----- ---- ---- --
在上面的代码中，我们定义了一个 MyInterface 接口。其中，age 属性加上了一个 ?，表示它是一个可选属性。在 printInfo 函数中，我们使用了一个空合并运算符 ??，来检查 age 是否为 null 或 undefined 值。如果是，则打印 "Unknown"。
类型判断
在 TypeScript 中，可以通过运用 null 或 undefined 类型，来区分变量值是否为空。
例如，我们使用 typeof 运算符来判断值是否为 null 或 undefined：
--- ---- ------ - ---- - ---------- ------------------ ----- -- ----------- --- - ----- ------------------ ----- -- --------
在上面的例子中，我们首先定义了一个 string | null | undefined 类型的变量 foo，它可以存放字符串、null 或 undefined 值。然后，我们使用 typeof 运算符来检查 foo 的类型。此时，foo 还没有被赋值，输出结果是 "undefined"。
接下来，我们将 foo 赋值为 null，并再次使用 typeof 运算符。此时，输出结果是 "object"。这是由于在 JavaScript 中，null 的类型是一个特殊的对象类型。
非空断言操作符
在 TypeScript 中，你可以通过非空断言操作符 !，来转换一个值类型，并表示这个值不为 null 或 undefined。
--- ---- ------ - ---- - ------- -------- ------------------------- -- -- --- - ----- ------------------------- -- -------- ---------
在上面的例子中，我们首先定义了一个类型为 string | null 的变量 bar，然后通过 ! 非空断言操作符，来确定 bar 不为 null 或 undefined。在这个例子中，我们使用了 bar!.length 来获取变量 bar 的长度属性。因为我们已经断言 bar 不为 null 或 undefined，所以 TypeScript 不会在这里抛出类型错误。
最后，我们将 bar 赋值为 null，再次调用 bar!.length。这时，TypeScript 会抛出 TypeError，因为我们已经断言过 bar 不为空值，并且它现在为 null。
结论
在 TypeScript 中，null 和 undefined 有着不同的含义和使用方式。虽然它们经常被归为一类，但却在判断值类型，设置可选参数和属性以及进行类型转换时起着重要的作用。
我们应该学会如何正确使用它们，使我们的代码得到更好的类型安全性和可读性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672d9c81eedcc8a97c856f6f