如何在打字稿中支持顶级等待？

Question

我正在使用带有 Ionic 的 4.3.5 版打字稿并且出现 ts(1378) 错误。

这里是 tsconfig：

{
  "compilerOptions": {
    "target": "es2017",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "sourceMap": true,
    "noImplicitAny": true,
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "ESNext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

还有我收到错误的代码：

import { Storage } from '@ionic/storage';

const store = new Storage();
await store.create();

export default store;

根据错误，我需要更改的只是目标为 >=es2017 和模块为 esnext 或系统，但我有，它仍然显示错误。

不知道是否相关，但你可以看到我的文件夹结构here。

提前致谢:)

Answer 1

问题不是来自您的 tsconfig，而是来自 webpack。

顶级等待仍然是 webpack 中的一个实验性功能。您必须在 webpack.config 中包含 experiments: { topLevelAwait: true } 才能使其正常工作。

https://webpack.js.org/configuration/experiments/

但是 create-react-app 为您管理 webpackconfig 文件，您必须从 create-react-app 中弹出才能访问它们。

通常不建议从 create-react-app 中弹出，尤其是添加实验性功能。它可能引发的问题多于解决的问题。

如果您仍想尝试，请按照以下步骤操作：

npm run eject

在新创建的config/webpack.config.js的return语句中添加experiments: { topLevelAwait: true }

为了证明这不是打字稿编译器问题。

1. 新建项目npm init
2. 只将打字稿添加到您的项目npm install typescript --save-dev
3. 使用您想要的设置创建您的 tsc.config 文件，但使用目标 es2017 或更高版本以及模块 esnext 或系统。
4. 创建 1 个具有顶级等待的文件。
5. 使用 npx tsc 编译。
6. 一切正常。

这是我用来参考的 ts.config：

{
    "compilerOptions": {
        "target": "es2017",
        "module": "system"
    },
    "include": ["topLevelAwait.ts"]
}