TypeScript：如何在ES6模块导入缺失.js后缀时让编译失败

要实现编译阶段拦截不带.js后缀的相对导入，你只需要通过TypeScript的模块解析配置来强制执行Node.js ES模块的严格解析规则，具体步骤如下：

• 第一步：配置package.json
  在项目根目录的package.json中添加"type": "module"，告诉Node.js当前项目使用ES模块规范：

  {
    "type": "module"
  }
  

• 第二步：修改tsconfig.json的编译选项
  调整compilerOptions中的以下配置项，开启严格的Node.js ES模块解析模式：

  {
    "compilerOptions": {
      // 指定输出模块格式为Node.js兼容的ES模块
      "module": "NodeNext",
      // 使用Node.js的ES模块解析规则
      "moduleResolution": "NodeNext",
      // 顶层await需要至少ES2020支持
      "target": "ES2020",
      // 可选：开启严格类型检查，提升项目安全性
      "strict": true,
      // 编译输出目录
      "outDir": "./dist",
      // 源码目录
      "rootDir": "./src"
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules"]
  }
  

• 第三步：验证效果
  当你在TypeScript文件中写出不带.js后缀的相对导入（比如import utils from './utils'），TypeScript编译器会直接抛出错误：

  TS2835: Relative import paths need explicit file extensions in EcmaScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Did you mean './utils.js'?
  

  这样就能在编译阶段直接拦截问题，避免运行时才报错。

需要注意的是：

• 这个规则仅针对相对导入（以./或../开头的导入），第三方包的导入（比如import lodash from 'lodash'）不受影响。
• 导入TypeScript源文件时，你需要写编译后的.js后缀（比如import utils from './utils.js'），TypeScript会自动映射到对应的utils.ts源文件进行类型检查，无需担心找不到源码。

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