ES11 与 TypeScript 4：你从 ES2020 中能得到什么？

随着前端技术的不断发展，ES2020 和 TypeScript 4 的发布引起了广泛关注。这两个技术的结合，为前端开发带来了更多的便利和可能性。本文将深入探讨 ES11 和 TypeScript 4 的特性，以及它们如何为我们的开发工作带来更多的价值。

ES11 新特性

Promise.allSettled

在 ES11 中，Promise.allSettled 方法被引入。它接受一个 Promise 数组作为参数，并返回一个 Promise 对象。当所有的 Promise 都已经 settled（fulfilled 或 rejected）时，该 Promise 对象才会 settled。

const promises = [
  Promise.resolve('Resolved!'),
  Promise.reject('Rejected!'),
];

Promise.allSettled(promises)
  .then(results => console.log(results));

输出结果：

[
  { status: 'fulfilled', value: 'Resolved!' },
  { status: 'rejected', reason: 'Rejected!' }
]

String.prototype.matchAll

String.prototype.matchAll 方法可以对一个字符串进行正则匹配，并返回一个迭代器，可以用于遍历所有匹配的结果。

// javascriptcn.com 代码示例
const str = 'Hello, World!';

const regex = /[A-Za-z]+/g;

const matches = str.matchAll(regex);

for (const match of matches) {
  console.log(match[0]);
}

输出结果：

"Hello"
"World"

Optional Chaining

Optional Chaining 是一个新的语言特性，可以让我们更方便地访问对象的属性，避免出现访问 null 或 undefined 的情况。

const obj = {
  prop1: {
    prop2: 'Value!'
  }
};

console.log(obj.prop1?.prop2); // "Value!"
console.log(obj.prop1?.prop3?.prop4); // undefined

Nullish Coalescing Operator

Nullish Coalescing Operator 是另一个新的语言特性，可以用来判断一个值是否为 null 或 undefined，并在其为 null 或 undefined 时返回一个默认值。

const value1 = null;
const value2 = undefined;
const value3 = 'Value!';

console.log(value1 ?? 'Default value!'); // "Default value!"
console.log(value2 ?? 'Default value!'); // "Default value!"
console.log(value3 ?? 'Default value!'); // "Value!"

TypeScript 4 新特性

类型别名支持泛型

在 TypeScript 4 中，类型别名支持泛型，可以更方便地定义复杂的类型。

type MyArray<T> = T[];

const arr: MyArray<number> = [1, 2, 3];

模板字符串类型

模板字符串类型是 TypeScript 4 中的一个新特性，可以让我们更方便地定义字符串类型。

type Greeting = `Hello, ${string}!`;

const greeting: Greeting = 'Hello, World!';

Key Remapping in Mapped Types

在 TypeScript 4 中，Mapped Types 支持键的重新映射，可以更方便地定义新的类型。

// javascriptcn.com 代码示例
interface Person {
  name: string;
  age: number;
}

type PersonKeysToUpperCase = {
  [K in keyof Person as Uppercase<K>]: Person[K];
};

const person: PersonKeysToUpperCase = {
  NAME: 'John',
  AGE: 30
};

总结

ES11 和 TypeScript 4 的新特性为前端开发带来了更多的便利和可能性。我们可以更方便地进行正则匹配、访问对象属性、定义复杂的类型等等。在实际的开发中，我们可以结合这些新特性，提高代码的可读性、可维护性和可扩展性。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65584e4ad2f5e1655d2812da