7.12.0发布——TypeScript 4.1，字符串作为导入/导出名称，以及类静态块

我们刚刚发布了Babel的一个新的次要版本!

这个版本包括对TypeScript 4.1测试版新功能的支持：模板字面类型和映射类型中的键重映射。

此外，我们实现了两个新的ECMAScript提议：类静态块和带有字符串名称的导入和导出。

最后，我们把@babel/plugin-syntax-module-attributes （以及相应的分析器插件moduleAttributes ）改名为@babel/plugin-syntax-import-assertions （以及importAssertions ），以配合最近的提案更新。旧的插件在Babel 8之前都可以使用，但现在已经废弃了。

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

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

亮点

TypeScript 4.1

TypeScript 4.1测试版在几周前公布，它包括了新的类型语法功能。

模板字面类型允许在类型级别上连接字符串，使用模板字面语法。

type Events = "Click" | "Focus";

type Handler = {
  [K in `on${Events}`]: Function
};

const handler: Handler = {
    onClick() {}, // Ok
    onFocus() {}, // Ok
    onHover() {}, // Error!
};

与映射类型中的键重映射一起，它们可以被用来表示复杂的对象转换。

type Getters<T> = {
    [K in keyof T as `get${Capitalize<K>}`]: () => T[K]
};

interface Dog { name: string; age: number; }

const lazyDog: Getters<Dog> = /* ... */;
lazyDog.getName(); // string
lazyDog.age; // error!

你可以在发布公告中阅读更多关于TypeScript 4.1的信息，或者查看这些新特性释放的其他功能的例子。然而，请记住，TypeScript 4.1仍然是实验性的

类静态块

Babel REPL上的例子

class C {
  static #x = 42;
  static y;
  static {
    try {
      this.y = doSomethingWith(this.#x);
    } catch {
      this.y = "unknown";
    }
  }
}

这个第二阶段的提议允许你在类定义被评估时应用额外的静态初始化。它的目的不是为了取代静态字段，而是为了实现以前无法完成的新用例。在上面的例子中，静态属性y 被初始化，使用#x 。如果doSomethingWith(this.#x) 抛出，y 将由一个默认值"unknown" 。

你可以在提案的描述中读到更多关于它的内容。

感谢Jùnliàng，你可以通过安装@babel/plugin-proposal-class-static-block 插件并将其添加到你的Babel配置中来测试这个提议。因为你很可能已经在使用其他的类特征插件，所以一定要把这个插件放在其他插件之前。

{
  "plugins": [
    "@babel/plugin-proposal-class-static-block",
    "@babel/plugin-proposal-class-properties"
  ]
}

ℹ️Babel实现了一个更新的规格版本，它解决了我们在当前规格基础上提供的反馈。

带有字符串名称的进口和出口

在上一次TC39会议上，我们达成了共识，允许用字符串作为导入和导出变量的名称。

// emojis.js
let happy = "wooo!";
export { happy as "😃" };

// main.js
import { "😃" as smile } from "./emojis.js";
console.log(smile); // wooo!

这允许跨模块使用任何有效的UTF-16名称，使JavaScript与其他语言如WebAssembly完全兼容。

你可以通过在你的配置中添加@babel/plugin-syntax-module-string-names 来启用对该功能的解析支持。

// babel.config.json
{
  "presets:" ["@babel/preset-env"],
  "plugins": [
    "@babel/syntax-module-string-names"
  ]
}

一旦该语法被合并到ECMAScript的主规范中，该功能将被默认启用。

请注意，不可能将任意字符串转译为ES2015风格的导入和导出：只有在针对不同的模块系统（如CommonJS）时，它们才会被转译。

导入断言的解析

"模块属性 "的提议已经有了很大的改变，也改名为 "导入断言"。

我们已经为这个新版本的提议实现了解析支持，可以使用@babel/plugin-syntax-import-assertions 插件启用（或者，如果你直接使用@babel/parser ，importAssertions ）。

 {
   "plugins": [
-    ["@babel/syntax-module-attributes", { "version": "may-2020" }]
+    "@babel/syntax-import-assertions"
   ]
 }

最重要的语法变化是：with 关键字被替换为assert ，断言现在被包裹在大括号里。

import json from "./foo.json" assert { type: "json" };

import("foo.json", { assert: { type: "json" } });

你可以在提案的README中阅读更多关于这些变化的内容。

⚠️@babel/plugin-syntax-module-attributes 将继续工作，直到我们发布Babel 8.0.0，但将不再维护，所以我们强烈建议迁移到新的插件。