ECMAScript 2021 加入了许多新特性，其中包括 Nullish 合并运算符和 Optional Chaining，这些新特性简化了我们编写代码的流程。然而，它们也带来了一些类型转换相关的问题。在这篇 TypeScript 教程中，我们将会介绍如何在 TypeScript 中优雅地处理 ECMA 2021 中的类型转换问题。
什么是类型转换问题？
类型转换问题通常发生在两个不同类型的值之间，当我们将一个值转换为另一个类型时，就需要进行一些操作。举个例子，当我们将字符串类型的值转换为数字类型时，需要用 parseInt() 方法或 Number() 函数进行转换。在 ECMAScript 2021 中，类型转换问题主要涉及 null 和 undefined 与其他类型的转换。
null 和 undefined 的转换问题
在 ECMAScript 2021 中， Nullish 合并运算符 ?? 和 Optional Chaining ?. 为我们提供了处理 null 和 undefined 的新方式。然而，它们也带来了一些类型转换问题。让我们看看下面的代码：
let foo = null; let bar = foo ?? "default"; let baz = foo || "default"; console.log(bar); // "default" console.log(baz); // "default"
在这个例子中，我们将 foo 赋值为 null。我们使用 Nullish 合并运算符 ?? 和 || 运算符来设置默认值，并将其赋值给 bar 和 baz。在这个例子中，bar 的值为 "default"，这是我们预期的。而 baz 的值也为 "default"，这可能会带来一些意外的后果。
当 foo 的值为 0、false 或空字符串时，baz 的值就会变成 "default"。因为在 JavaScript 中，0、false 和空字符串都会被当做 false。这就是一个类型转换问题，需要我们保持警觉。
TypeScript 中的类型转换问题
TypeScript 帮助我们在开发过程中识别类型转换问题。例如，当我们将 null 或 undefined 赋值给一个没有明确声明类型的变量时，TypeScript 会默认将其声明为 any 类型。
let foo = null; // foo 是 any 类型 let bar: string = foo; // 会抛出类型不兼容错误
在这个例子中，我们将 null 赋值给变量 foo，它被自动声明为 any 类型。当我们尝试将 foo 赋值给一个明确声明类型的变量 bar 时，TypeScript 会抛出类型不兼容错误。
为了解决这个问题，我们可以显式地声明变量 foo 的类型：
let foo: string | null = null; let bar: string = foo; // 编译通过
这样，TypeScript 就会知道 foo 的类型是 string 或 null。
如何优雅的处理类型转换问题？
在 ECMAScript 2021 中，我们可以使用 Nullish 合并运算符 ?? 和 Optional Chaining ?. 来优雅地处理 null 和 undefined 的情况。然而，在处理其他类型的值时，我们仍然需要小心，以避免类型转换问题。下面是一些处理类型转换问题的方法：
- 显式声明变量的类型
- 使用类型断言
显式声明变量的类型
在 TypeScript 中，显式声明变量的类型是避免类型转换问题的最好方式。在变量声明时，可以使用类型注释显式地声明变量的类型：
let foo: string | null = null; let bar: string = foo; // 编译通过
这样，我们可以保证 TypeScript 始终知道变量的类型，从而避免类型转换问题。
使用类型断言
类型断言是另一种处理类型转换问题的方式。类型断言可以将一个值强制转换为另一个类型，这在某些情况下可能很有用。例如，当我们从 localStorage 中获取值时，它们通常都是字符串类型。我们可以使用类型断言将它们转换为具体的类型。
interface User {
name: string;
age: number;
}
let user = JSON.parse(localStorage.getItem("user")) as User;在这个例子中，我们从 localStorage 中获取了一个名为 user 的值，并使用 JSON.parse() 将其转换为对象。因为从 localStorage 中获取的值是字符串类型的，所以我们需要使用类型断言把它转换为 User 类型。
示例代码
下面是一些使用 TypeScript 处理类型转换问题的示例代码：
-- -------------------- ---- ------- --- ---- ------ - ---- - ----- --- ---- ------ - ----- -- ----------- --- --- ---- --- -- ------ - --------- - ---------- --- -- ------ - - -- -- -- -- ------- ---------- --- -- ------ - --------- - ---------- --- -- ------ - - - ----------- --- - -- -- -- -------- -------- ------ -- ------- --------- ---- - ----- ------- ---- ------- - --- ---- - ---------------------------------------- -- ----- -- - ------------ ------ ---- --
结论
在 ECMAScript 2021 中，Nullish 合并运算符 ?? 和 Optional Chaining ?. 为我们提供了处理 null 和 undefined 的新方式。然而，这些新特性也带来了一些类型转换相关的问题。在 TypeScript 中，显式声明变量的类型和使用类型断言可以优雅地处理类型转换问题，确保代码的类型安全性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674ddd42947dc5bcb3035ad5