TypeScript：不能在模块外使用 import 语句

TypeScript: 不能在模块外使用 import 语句

TypeScript: Cannot use import statement outside a module

要解决 TypeScript 中的错误“无法在模块外使用导入语句”，请在您的文件中设置该module选项，并确保编译您的 TypeScript 文件（例如使用），而不是直接使用.commonjstsconfig.jsonts-nodenode

不能在模块外使用 import 语句

首先，确保tsconfig.jsonmodule文件中的选项
设置为
.commonjs

tsconfig.json文件


{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "esModuleInterop": true,
    // ... your other options
  }
}

模块选项设置程序的模块系统。

esModuleInterop选项
false默认
设置为。

这导致它以类似于 ES6 模块的方式对待 CommonJS 模块，并可能导致一些问题。设置esModuleInterop修复true 这些问题。

不要尝试直接运行 TypeScript 文件`node`

TypeScript 错误的另一个常见原因是尝试直接使用运行 TypeScript 文件node，例如node src/index.ts。

这是行不通的，因为在使用node.

babel如果您错误地配置了使用或的TypeScript 项目，情况也是如此ts-node。

您的 TypeScript 文件是否被转换为构建目录中的 JavaScript 文件？你的构建目录应该只包含 JavaScript 文件。如果它包含 TypeScript 文件，则说明您的项目配置不正确。

如果您的项目使用ts-node，您可以尝试在您的中添加一个覆盖
tsconfig.json，设置module为commonjs。

tsconfig.json文件


{
  "ts-node": {
    // these options are overrides used only by ts-node
    "compilerOptions": {
      "module": "commonjs"
    }
  },
  "compilerOptions": {
    // ... your options
  },
}

您应该检查的另一件事是文件main中的属性指向您的文件，而不是您的文件。 package.jsonindex.jsindex.ts

查看您通过文件outDir中的选项设置的构建文件夹tsconfig.json。

您的配置可能是错误的，您仍然可以在构建目录中生成 TypeScript 文件。

这是 TypeScript 项目的工作配置`ts-node`

如果以上建议均无效，请查看使用ts-node.

这是我的tsconfig.json文件。

tsconfig.json文件


{
  "compilerOptions": {
    "skipLibCheck": true,
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "allowJs": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "outDir": "./build",
    "rootDir": "src",
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

确保include数组指向包含项目所有必需文件的目录。

这是我的package.json文件。

包.json


{
  "name": "example",
  "version": "1.0.0",
  "main": "build/index.js",
  "scripts": {
    "build": "rimraf ./build && tsc",
    "dev": "nodemon",
    "start": "npm run build && node build/index.js",
  },
  "devDependencies": {
    "@types/node": "^17.0.21",
    "nodemon": "^2.0.15",
    "rimraf": "^3.0.0",
    "ts-node": "^10.4.0",
    "typescript": "^4.6.2"
  }
}

这是nodemon.json位于同一目录中的配置文件。

nodemon.json


{
  "watch": ["src"],
  "ext": ".ts,.js",
  "ignore": [],
  "exec": "ts-node --files ./src/index.ts"
}

此项目结构假定您将所有 TypeScript 文件放在一个名为的目录中src，并index.ts在src/index.ts.

您的src/index.ts文件可能像下面这样简单。

源代码/index.ts


console.log('example');

这是项目的文件/文件夹结构。

壳


src/
    - index.ts
nodemon.json
package.json
tsconfig.json

该ts-node包会将您的代码转换为 JavaScript，并将使用node.

您的构建文件将位于该build目录中。请注意，您的构建目录不应包含任何 TypeScript 文件，而应仅包含 JavaScript 文件。

如果您的构建目录包含 TypeScript 文件，则您的项目中存在配置错误。

如果您创建一个新package.json文件，请确保安装您的依赖项。

壳


npm install

您可以使用该npm run dev命令启动您的开发服务器。

壳


npm run dev

该npm start命令可用于构建您的项目并创建build
包含您的.js文件的目录。

壳


npm start

这是我运行命令后项目的样子npm start。

工作打字稿项目

该build目录包含一个index.js文件，该文件是通过在 TypeScript 文件ts-node上运行包而生成的src/index.ts。

build您项目的或目录dist应仅包含 JavaScript 文件。