做前端开发的同学一定都很熟悉 TypeScript，它是一种被广泛运用的编程语言，它的主要目的是在 JavaScript 范畴内改进生产力和代码的可维护性。
在 TypeScript 4.0 版本推出，空安全特性受到了广泛的好评。空安全指的是程序使用的变量都能被 TypeScript 正确地定义是否为 null 或 undefined。这个特性可以避免运行时无效的函数调用、报错和程序运行不稳定等问题。
如果你是 TypeScript 的初学者，本文将对 TypeScript 空安全特性进行详细介绍和指导。如果你是有一定经验的开发者，那么你也可以再次强化你的基础知识，并学会如何有效地使用 TypeScript 空安全特性。
为什么需要 TypeScript 空安全？
在 JavaScript 中，未初始化的变量默认值是 undefined，而未赋值的变量默认值是 null。
下面是一个简单的示例
let a: number = undefined // OK let b: number = null // OK
在 JavaScript 中，这是没有问题的。
但是在 TypeScript 中，这回导致很多问题，比如使用变量但它的值为 null 或 undefined 时，程序不会报错。这会带来那程序偏移、调试困难等弊端。
因此，TypeScript 引入了 null 和 undefined 类型，为了避免这些问题和获得编写更安全的具有可读性的代码。
TypeScript 空安全默认关闭
在 TypeScript 中，默认情况下 TypeScript 空安全特性是关闭的。这意味着变量的类型可以是 null 或 undefined。
下面是一个简单示例：
let foo: string = 'bar' foo = null // OK foo = undefined // OK
上面的这个示例中，将 foo 赋值为 null 或 undefined 是可行的。
如果你希望 TypeScript 严格控制 null 或 undefined 的使用，你需要启动 TypeScript 的空安全模式。
TypeScript 空安全模式
要打开 TypeScript 的空安全模式，你需要在 tsconfig.json 中设置 strictNullChecks 选项，如下所示：
{
"compilerOptions": {
"strict": true,
"strictNullChecks": true
}
}在启动了空安全模式之后，你需要在 TypeScript 中添加明确的 null 或 undefined 类型声明才能使用它们。
以下三种情况你需要显式地声明变量的类型，避免 TypeScript 的这种行为：
- 当你声明一个变量并在后续的代码中使用它
- 当你将一个对象分配到一个变量并用它做进一步的操作
- 当你写一个函数并且你需要声明函数的参数和返回值
下面是一个简单的示例：
-- -------------------- ---- ------- --- ---- ------ - ---- - --------- - ---- --- - ----- --- - --------- -- -- --- ---- -------- - --------- - --- -- -- --- - --------- -- -- -------- ------ ------- -- -------- ------ - ------ - - - -
在上面的这个示例中，变量 foo 显式声明了它可以是 null 或 undefined，在启动空安全模式之后，我们需要明确的声明变量。
接下来，变量 arr 显式声明了它的类型可以是数组或 undefined。
最后， sum 函数在声明它的类型、参数和返回值（这是不必须的，但好的实践）。
TypeScript 空安全注意事项
在使用 TypeScript 空安全时，你需要注意一下几点：
- 你需要在运行 TypeScript 代码之前编译它
- 确保你清楚地声明 null 或 undefined 属性或变量
- 请避免使用 any 类型，这样会使 TypeScript 的 null/undefined 检查无效
在 TypeScript 4.0 之前，您需要显式地声明一个可空值（使用 null 或 undefined ），否则 TypeScript 将会调用运行时错误。
但在 TypeScript 4.0 引入了可选链式语法，你可以通过这个新特性来避免这种错误：
-- -------------------- ---- -------
--------- ---- -
--------- -
-------- -
----- ------
-
-
-
----- ----- ---- - --
---------------------------------------- -- ---- -- ------ ----------在上面的这个示例中，我们定义了一个名为 User 的接口，该接口有一个可选属性 address，其中有一个可选属性 street，它有一个 name 属性。
在 user 对象中，我们没有定义任何属性。但是，在打印 user 的 address、streets、name 时，TypeScript 不会抛出任何错误。这是可选链式语法的功劳。
TypeScript 空安全练习
我们来看一个实战示例。假设我们正在通过 API 获取用户信息并打印在页面上：
-- -------------------- ---- -------
--------- ---- -
--- ------
----- ------
------ ------
-------- -------
------ ------ - ----
---------- ----
---------- ----
-
----- -------- ------------- -------- ------------- -
----- -------- - ----- ---------------------
-- -------------- -
----- --- ------------ --- ----- ------
-
----- -------- - ----- ---------------
------ --------
-
-------- --------------- ----- -
---------------- ------------
------------------ --------------
------------------- ---------------
-- ----------- --- ----- -
------------------- ---------------
-
--------------- ------ -----------------
-------------------- --- ---------------------------------
-------------------- --- ---------------------------------
-
----- -------- -------- ------- -
--- -
----- ---- - ----- -------------
---------------
- ----- ------- -
--------------------
-
-
-------在这个示例中，我们定义了一个名为 User 的接口，它定义了用户的各个属性。
接下来，我们定义了一个函数 fetchUser，使用它我们可以获取给定 id 的用户数据。
接下来使用 printUser 函数，将用户数据打印在控制台中。
我们使用了 TypeScript 的可空类型以避免使用 null 变量，并使用 try/catch 捕获异常。如果你没有启动 TypeScript 的空安全模式，代码就会编译成功，但在运行时会出现错误。
总结
TypeScript 的空安全特性可以有效的避免许多问题。
在这篇文章中，我们介绍了 TypeScript 空安全的基本概念和理念，如何在项目中启用 TypeScript 空安全模式，以及空安全可能遇到的问题和注意事项。
如果你想开始在你的项目中使用 TypeScript 空安全模式，我们强烈建议你好好阅读本文，用 TypeScript 空安全创造更加安全的程序。
最后，我们为你准备了一个练习，希望这个练习可以帮助你更好的理解 TypeScript 空安全的用法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645ca263968c7c53b0f10035