JavaScript 是一门动态类型语言，这意味着在运行时才会确定变量的类型。这种灵活性为 JavaScript 带来了很多好处，但也可能导致类型错误和难以调试的问题。为了解决这些问题，ECMAScript 2020（ES11）引入了一些新的特性，可以帮助我们实现 JavaScript 的类型安全。
1. 可选链操作符
可选链操作符（Optional Chaining Operator）是 ES11 中引入的一项新特性，它可以简化访问嵌套对象的代码，并且避免了访问不存在属性时出现的 TypeError 错误。
在旧的 JavaScript 版本中，我们可能需要使用繁琐的 if 语句来判断嵌套对象是否存在，例如：
if (obj && obj.prop && obj.prop.subprop) {
// 访问 obj.prop.subprop
}使用可选链操作符，我们可以将上面的代码简化为：
if (obj?.prop?.subprop) {
// 访问 obj.prop.subprop
}如果 obj、prop 或 subprop 不存在，上述代码不会抛出 TypeError 错误，而是返回 undefined。
2. 空值合并运算符
空值合并运算符（Nullish Coalescing Operator）也是 ES11 中引入的一项新特性，它可以判断变量是否为 null 或 undefined，并提供默认值。
在旧的 JavaScript 版本中，我们可能需要使用繁琐的三元运算符来判断变量是否为 null 或 undefined，并提供默认值，例如：
const value = input !== undefined && input !== null ? input : 'default';
使用空值合并运算符，我们可以将上面的代码简化为：
const value = input ?? 'default';
如果 input 为 null 或 undefined，上述代码会返回 'default'。
3. 类型断言
类型断言（Type Assertion）是 TypeScript 中的一项特性，它可以告诉编译器某个变量的类型，从而实现类型安全。ES11 中也引入了这个特性，但需要使用新的语法。
在旧的 JavaScript 版本中，我们可能需要手动判断变量的类型，并进行类型转换，例如：
const input = document.querySelector('input') as HTMLInputElement;使用 ES11 中的类型断言，我们可以将上面的代码简化为：
const input = document.querySelector('input') as HTMLInputElement;使用 as 关键字可以告诉编译器 input 的类型是 HTMLInputElement。
实现类型安全的示例代码
下面是一个使用 ES11 新特性实现类型安全的示例代码：
-- -------------------- ---- ------- --------- ---- - ----- ------- ---- ------- - -------- ---------- ---- - ----- ---- - ----------------------------- ----- --- - ---------------------------- ------ - ----- --- - -- ----- - ----- ---- - ---------- ------------------------------------- -- --------- --- ---- - ---------
上面的代码中，我们定义了一个 User 接口，表示用户对象必须包含 name 和 age 属性。在 getUser 函数中，我们从 localStorage 中获取 name 和 age，并使用类型断言告诉编译器返回值的类型是 User。
但是，由于 localStorage 可能没有 name 或 age 属性，上述代码会在编译时报错。为了解决这个问题，我们可以使用可选链操作符和空值合并运算符：
-- -------------------- ---- ------- --------- ---- - ----- ------- ---- ------- - -------- ---------- ---- - ----- ---- - ---------------------------- -- --- ----- --- - --------------------------- -- --- ------ - ----- --- - -- ----- - ----- ---- - ---------- ------------------------------------- -- ---------- - ------- ----------- --
使用空值合并运算符，如果 localStorage 中没有 name 或 age 属性，name 和 age 会被赋值为 ''。使用可选链操作符，如果 user 对象中的 name 或 age 不存在，不会抛出 TypeError 错误。
但是，由于 name 为 ''，不能调用 toUpperCase 方法，上述代码会在运行时报错。为了解决这个问题，我们可以在 getUser 函数中进行类型转换：
-- -------------------- ---- ------- --------- ---- - ----- ------- ---- ------- - -------- ---------- ---- - ----- ---- - ---------------------------- -- --- ----- --- - ------------------------------------ -- ---- ---- ------ - ----- --- - -- ----- - ----- ---- - ---------- ------------------------------------- -- -- ------------ -- ---- -----
使用 parseInt 函数将 age 转换为数字类型，如果 localStorage 中没有 age 属性，age 会被赋值为 0。这样，我们就实现了 JavaScript 的类型安全。
总结
ECMAScript 2020（ES11）引入了一些新的特性，可以帮助我们实现 JavaScript 的类型安全。可选链操作符可以简化访问嵌套对象的代码，并且避免了访问不存在属性时出现的 TypeError 错误。空值合并运算符可以判断变量是否为 null 或 undefined，并提供默认值。类型断言可以告诉编译器某个变量的类型，从而实现类型安全。通过使用这些新特性，我们可以让 JavaScript 更加稳定和可靠。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f3a4e02b3ccec22fc17376