TypeScript能否同时导入ESM与CJS依赖？如何配置tsconfig.json？

当然可以通过调整tsconfig.json的关键配置，让TypeScript自动适配CommonJS（CJS）和ES模块（ESM）依赖，无需手动区分导入方式。以下是核心配置方案：

关键配置项说明 #

• module & moduleResolution: 同时设置为NodeNext（或ESNext），这会让TypeScript遵循Node.js的原生模块解析逻辑，自动识别依赖的导出格式（CJS/ESM）。
• allowSyntheticDefaultImports: 设为true，允许你用import xxx from 'package'的语法导入没有默认导出的CJS模块，无需手动写import * as xxx from 'package'。
• esModuleInterop: 设为true，该配置会自动生成适配层，将CJS模块的导出转换为符合ESM规范的形式，避免导入时出现类型或运行时错误。

完整tsconfig.json示例 #

{
  "compilerOptions": {
    "target": "ES2020", // 根据你的运行环境调整目标版本
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "strict": true, // 开启严格类型检查（可选但推荐）
    "skipLibCheck": true, // 跳过第三方依赖的类型检查，加快编译速度
    "outDir": "./dist" // 编译输出目录
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

额外注意事项 #

• 确保你的项目根目录package.json设置了type字段：如果你的源码是ESM格式，设为"type": "module"；如果是CJS格式，设为"commonjs"。TypeScript会根据这个字段匹配对应的模块解析规则。
• 部分老旧CJS依赖可能缺少正确的类型声明文件，遇到这种情况可以在项目中创建typings目录手动补充类型，或临时使用// @ts-ignore跳过类型检查（不建议长期依赖）。
• 若个别依赖出现解析异常，可检查该依赖package.json中的main、module、types字段是否正确，或在tsconfig.json的paths字段中单独指定该依赖的解析路径。

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