跳至主内容

7.18.0 发布：支持私有元素解构与 TypeScript 4.7

· 1 分钟阅读
Babel Team
非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

我们刚刚发布了 Babel 7.18.0！

此版本包含对私有解构（private destructuring）提案以及 TypeScript 4.7 的支持。

您可以在 GitHub 上阅读完整的变更日志。

如果您或您的公司希望支持 Babel 和 JavaScript 的发展，但不确定如何操作，您可以通过 Open Collective 向我们捐款，或者更好的是，直接与我们合作实现新的 ECMAScript 提案！作为志愿者驱动的项目，我们依赖社区支持来资助为广泛 JavaScript 用户提供帮助的工作。如需进一步讨论，请通过 team@babeljs.io 联系我们！

重点更新​

私有解构 (#14304)​

Babel 现在支持转换私有解构提案。您可以在解构模式中使用私有字段或方法：

InputOutput
JavaScript
class Foo {
  #x = 0;
  y = 0;

  equals(obj) {
    const { #x: x, y: y } = this;

    return (
      x === obj.#x && y === obj.y
    );
  }
}

JavaScript
class Foo {
  #x = 0;
  y = 0;

  equals(obj) {
    const x = this.#x,
      { y } = this;

    return (
      x === obj.#x && y === obj.y
    );
  }
}

您可以通过在配置中添加 @babel/plugin-proposal-destructuring-private 插件来启用此功能。

为最小化转译开销，此插件生成的代码仍依赖非私有解构和私有元素支持。如需进一步编译它们，请启用相关插件（或使用 @babel/preset-env）。

TypeScript 4.7 支持 (#14359, #14457, #14476)​

TypeScript 4.7 支持多项新语法特性：

  • 实例化表达式（instantiation expressions），允许在不调用函数的情况下指定函数的类型参数：

    const identity = <T>(val: T) => val;

    const stringIdentity = identity<string>; // (val: string) => string;

  • 类型参数的显式变体注解（explicit variance annotations），用于在计算不同类型兼容性时指导 TypeScript 类型检查器：

    type Provider<out T> = () => T;
    type Consumer<in T> = (x: T) => void;
    type Mapper<in T, out U> = (x: T) => U;
    type Processor<in out T> = (x: T) => T;

    在此示例中，Provide<string> 是 Provider<string | number> 的子类型，而 Consumer<string | number> 是 Consumer<string> 的子类型。

  • 条件类型中 infer 操作符的约束：

    type GetColor<T> =
      T extends { color: infer C extends "red" | "pink" }
        ? C
        : "unknown color";

您可以在 TypeScript 官方博客 阅读完整的 TypeScript 4.7 发布公告。

内联 regenerator-runtime 辅助函数 (#14538)​

从 Babel 7.18.0 开始，regenerator-runtime 会以与 Babel 注入其他运行时辅助函数相同的方式自动注入，不再依赖隐式的 regeneratorRuntime 全局变量。当不使用 @babel/plugin-transform-runtime 插件时，Babel 会自动内联 regeneratorRuntime 辅助函数：

  • 可以停止手动加载 regenerator-runtime（通过 import、require 或 <script>）；

  • 可以从 package.json 的依赖项中删除 "regenerator-runtime"。

例如，以下是编译 var f = function*() {}; 时新旧 Babel 版本的输出差异：

+function _regeneratorRuntime() { /* ... */ }

-var f = /*#__PURE__*/regeneratorRuntime.mark(function f() {
+var f = /*#__PURE__*/_regeneratorRuntime().mark(function f() {
-  return regeneratorRuntime.wrap(function f$(_context) {
+  return _regeneratorRuntime().wrap(function f$(_context) {
     while (1) {
       switch (_context.prev = _context.next) {
         case 0:
         case "end":
           return _context.stop();
       }
     }
   }, f);
 });