TS 虐我千百遍，严格模式下 “Undefined” 的 4 大救赎！

TS 严格模式中的救赎之道：对象可能为“未定义”的 4 大解决之道

前言

TypeScript（TS）是一种以 JavaScript 为基础的编程语言，它引入了一个类型系统，帮助开发人员编写更健壮、更可维护的代码。在 TS 的严格模式下，对类型的检查更加严格，但有时会导致令人抓狂的错误：“TS 对象可能为“未定义”，不能将类型“ XXXX | undefined “分配给类型{ xxxx }”。

什么是严格模式？

严格模式是一种可选设置，可以启用额外的语言限制，以减少错误并强制编写更可靠的代码。在 TS 中，严格模式通过添加 --strict 标志启用。

理解“未定义”

“未定义”是一个特殊的值，表示变量尚未初始化或已显式设置为 undefined。在严格模式下，TS 会更严格地检查类型，并会报告一些在非严格模式下不会报告的错误。

解决之道 1：可选链操作符

可选链操作符（?.）是 TS 中的一个方便工具，它允许我们安全地访问可能为 undefined 或 null 的对象的属性或方法。语法如下：

object?.property

如果 object 为 undefined，则结果将为 undefined，否则它将返回 property 的值。

代码示例：

const user = { name: "John" };

// 安全地访问 name 属性
const name = user?.name;

解决之道 2：条件判断

条件判断是一种有效的方法来处理可能为 undefined 的对象。我们可以使用 if 语句来检查对象是否为 undefined，然后再访问它的属性或方法。

代码示例：

if (user) {
  // user 不为 undefined，可以安全地访问 name 属性
  const name = user.name;
} else {
  // user 为 undefined，进行相应的处理
}

解决之道 3：类型注解

类型注解允许我们显式地指定变量的类型。在 TS 严格模式下，如果一个变量可能为 undefined，我们可以使用以下语法显式地指定它的类型：

let variable: Type | undefined;

这样，TS 就会知道 variable 可能为 undefined，并会在使用它之前发出警告。

代码示例：

let user: User | undefined;

解决之道 4：断言

断言是一个特殊语法特性，它告诉 TS 编译器，我们确定某个变量的值不是 undefined。语法如下：

variable as Type;

断言会忽略 TS 关于变量可能为 undefined 的警告，并允许我们安全地使用它。

代码示例：

const user = document.getElementById('user') as User;

结论

在 TS 严格模式下，了解如何处理可能为 undefined 的对象至关重要。通过掌握可选链操作符、条件判断、类型注解和断言这 4 大救赎之道，我们可以轻松解决此类问题，并编写出更加健壮的代码。

常见问题解答

1. 什么时候应该使用严格模式？

当我们希望编写更高质量的代码，并减少潜在的错误时，应该使用严格模式。

2. 如何启用严格模式？

在 TypeScript 编译器命令中添加 --strict 标志。

3. 为什么在严格模式下会遇到“对象可能为“未定义””的错误？

因为 TS 会更严格地检查类型，并且会报告在非严格模式下不会报告的一些错误。

4. 什么是可选链操作符？

可选链操作符（?.）允许我们安全地访问可能为 undefined 或 null 的对象的属性或方法。

5. 什么是断言？

断言是一个特殊语法特性，它告诉 TS 编译器，我们确定某个变量的值不是 undefined。