仅当模块选项设置为 es2022 时才允许使用顶级 await 表达式

仅当模块选项设置为 es2022 时才允许使用顶级 await 表达式

Top-level ‘await’ expressions are only allowed when the ‘module’ option is set to ‘es2022’, ‘esnext’

要解决错误“Top-level ‘await’ expressions are only allowed when the ‘module’ option is set to ‘es2022’, ‘esnext’”，在函数中使用关键字await或
async在文件中设置
选项moduletoes2022和targetto 。es2017tsconfig.json

下面是错误如何发生的示例。

// ⛔️ Error: Top-level 'await' expressions are only allowed
// when the 'module' option is set to 'es2022', 'esnext',
// 'system', or 'nodenext', and the 'target' option is set to 'es2017' or higher.ts(1378)
const result = await Promise.resolve(42);
console.log(result);

export {};

我使用该export {}行使文件成为 ES 模块，因为await
仅允许在作为模块的文件的顶层使用表达式，否则会发出错误。

const result = await Promise.resolve(42);
console.log(result);

// ⛔️ Error: 'await' expressions are only allowed at the top level
// of a file when that file is a module, but this file has no imports
// or exports. Consider adding an empty 'export {}' to make this file a module.ts(1375)

在函数await内部使用关键字async

await解决错误的一种方法是在函数内部使用关键字async
。

async function example() {
  const result = await Promise.resolve(42);
  console.log(result); // 👉️ 42
  // 👉️ result is available here
}

example();

更新你的tsconfig.json以支持顶级等待

或者，您可以更新文件以支持项目中的tsconfig.json顶层
。await

要在您的 TypeScript 项目中启用顶级等待，请打开您的
tsconfig.json文件并设置：

• module至es2022（或更高）
• target至es2017（或更高）或ESNext

tsconfig.app.json请注意，如果使用 Angular 或构建过程中使用的任何配置文件，您可能还必须在文件中设置选项。

{
  "compilerOptions": {
    "target": "es2017",
    "module": "es2022",
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

await现在我可以在我的文件中使用顶级index.ts。

const result = await Promise.resolve(42);
console.log(result);

export {};

如果出现错误“要加载 ES 模块，请在 package.json 中设置“type”：“module”或使用 .mjs 扩展名。” ，您还必须在文件中设置type为
。modulepackage.json

{
  "type": "module",
  // ... rest
}

现在您可以运行包含顶级等待的文件。

tsc && node build/index.js

如果您使用include或
files选项，请确保您在其中使用顶级的文件await包含在您的项目中并且正在被 TypeScript 跟踪。

模块选项设置项目的模块系统。

module设置为es6和es2022（或）之间的区别esnext在于es2022增加了对顶级的支持await。

target选项更改哪些 JavaScript 特性被降级，哪些保持不变。

例如，如果您的目标是 ES5 或更低版本，箭头函数将转换为常规函数。

根据您的环境，这可能无关紧要。例如，如果您只针对现代浏览器或正在编写服务器端代码，您可能就没问题。

只需确保发出的 JavaScript 能够在您打算运行应用程序的环境中运行。

额外资源

您可以通过查看以下教程来了解有关相关主题的更多信息：

• ‘await’ 表达式只允许在异步函数中使用
• 如何在 TypeScript 中输入异步函数
• 在 TypeScript 的箭头函数中使用泛型
• 仅当模块选项设置为 es2022 时才允许使用顶级 await 表达式