如何在TypeScript 4.3.5（Ionic环境）中支持顶层await并解决ts(1378)错误？

Let's break down why you're hitting this TS1378 error even after setting the recommended target and module options, and walk through fixes that should resolve it.

First, a quick recap: TS1378 triggers when you use top-level await (outside an async function) in a context where TypeScript doesn't recognize the file as an ES module that supports this feature. Your tsconfig looks mostly correct, but there are a few gaps or conflicts that might be causing the issue.

Step 1: Fix the tsconfig.json syntax error #

First off, your provided tsconfig is missing a closing } at the end. That might be a copy-paste mistake, but fixing it ensures TypeScript parses the config correctly:

{
  "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" ]
}

Step 2: Address top-level await limitations in Ionic's build pipeline #

Even with the correct tsconfig, Ionic's underlying build tools (like Webpack or Vite) might not fully support top-level await in all contexts, especially with TypeScript 4.3.5 (which is a bit older). A reliable workaround is to wrap your storage initialization in an async function and export a Promise that resolves to the initialized store:

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

const store = new Storage();

// Wrap initialization in an async IIFE and export the promise
export default (async () => {
  await store.create();
  return store;
})();

Then, when you import the store elsewhere, you'll need to await it to get the initialized instance:

import storePromise from './path-to-your-store-file';

// Use in an async context
async function someFunction() {
  const store = await storePromise;
  await store.set('key', 'value');
}

Step 3: Verify module consistency #

If you still want to use top-level await directly, double-check these:

• Ensure your project's package.json includes "type": "module" (this tells Node.js and build tools to treat .ts files as ES modules). Note: Some Ionic templates might not set this by default, so adding it could resolve module mismatches.
• Confirm that your isolatedModules: true setting isn't conflicting. While top-level await works with isolated modules, TypeScript requires strict ES module compliance here—make sure there are no CommonJS-style exports (like module.exports) in the same file.

Why your initial config didn't work #

TypeScript 4.3.5 does support top-level await with module: ESNext and target: es2017, but the error often stems from build tooling overriding or ignoring your tsconfig settings. Ionic's pipeline might still be treating the file as a CommonJS module behind the scenes, which blocks top-level await. The async wrapper approach avoids this by moving the await into a function scope.

内容的提问来源于stack exchange，提问作者LoyalPotato