跳至主内容

7.12.0 发布：支持 TypeScript 4.1、字符串导入/导出名与类静态块

· 1 分钟阅读
Nicolò Ribaudo
非官方测试版翻译

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

我们刚刚发布了 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 (#12129, #12131)​

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 仍处于实验阶段！

类静态块 (#12079, #12143)​

在 Babel REPL 查看示例

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

该 Stage 2 提案允许在类定义求值时执行额外的静态初始化操作。它并非旨在替代静态字段，而是为了支持此前无法实现的新用例。在上例中，静态属性 y 通过 #x 进行初始化。若 doSomethingWith(this.#x) 抛出异常，y 将被赋予默认值 "unknown"。

您可在提案说明文档中查看更多详细信息。

感谢 Jùnliàng 的贡献，您可通过安装 @babel/plugin-proposal-class-static-block 插件并在 Babel 配置中添加该插件来测试此提案。由于您可能已在使用其他类特性插件，请务必将此插件置于其他插件之前：

babel.config.json
{
  "plugins": [
    "@babel/plugin-proposal-class-static-block",
    "@babel/plugin-proposal-class-properties"
  ]
}
备注

Babel 实现了该规范的更新版本，该版本基于当前规范整合了我们提交的反馈。

支持字符串命名的导入与导出 (#12091)​

在最近一次 TC39 会议中，通过此 PR 达成了允许使用字符串作为导入导出变量名的共识：

JavaScript
// 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 等不同系统时才会进行转译。

导入断言解析支持 (#12139)​

"模块属性"（module attributes）提案已发生重大变更，并更名为"导入断言"（import assertions）。

我们已实现该提案新版本的解析支持，可通过 @babel/plugin-syntax-import-assertions 插件启用（若直接使用 @babel/parser，则需启用 importAssertions 选项）：

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

最显著的语法变更是：with 关键字已被替换为 assert，且断言现在需用花括号包裹：

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

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

您可在提案的 README 中查看更多变更详情。

注意

@babel/plugin-syntax-module-attributes 在 Babel 8.0.0 发布前仍可继续使用，但将不再维护。因此我们强烈建议迁移至新插件。