7.18.0发布——解构私有元素和TypeScript 4.7

我们刚刚发布了Babel 7.18.0!

这个版本包括对私有元素重构建议和TypeScript 4.7的支持。

您可以在GitHub上阅读整个更新日志。

如果您或您的公司想支持Babel和JavaScript的发展，但不确定如何支持，您可以在我们的开放集体中为我们捐款，更好的是，可以直接与我们合作实现ECMAScript的新提案作为一个志愿者驱动的项目，我们依靠社区的支持来资助我们支持广大的JavaScript用户。如果你想讨论更多，请联系team@babeljs.io!

亮点

私有化结构(#14304)

Babel支持改造私有结构化的提议。现在你可以在结构化模式中使用私有字段或方法。

输入	输出

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

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

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

|

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支持不同的新语法特性。

• 实例化表达式，它允许指定函数的类型参数而不调用它们：

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

• 类型参数的显式差异注释，在计算不同类型之间的兼容性时指导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 4.7发布公告。

内联regenerator-runtime 帮助器(#14538)

从Babel 7.18.0开始，regenerator-runtime 被自动注入，与Babel注入其他运行时帮助程序的方式相同，不依赖隐含的regeneratorRuntime global。当不使用 @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);
 });