导入带.es6扩展名的ES6 JS文件到TypeScript报ts(2307)错误求解决方案

要让TypeScript把.es6扩展名视为JS文件，无需重命名文件或修改构建工具，只需调整tsconfig.json并添加必要的类型声明，具体步骤如下：

1. 启用JS文件支持 #

在tsconfig.json的compilerOptions中开启allowJs，让TypeScript允许处理JavaScript类文件（包括.es6后缀的文件）：

"compilerOptions": {
  "allowJs": true,
  // 其他已有配置...
}

2. 配置模块解析扩展名 #

在compilerOptions里添加resolveExtensions，把.es6加入模块解析的扩展名列表，让TS在导入时自动识别该后缀：

"compilerOptions": {
  "resolveExtensions": [".es6", ".js", ".ts", ".tsx", ".json"],
  // 其他已有配置...
}

注意：扩展名顺序会影响解析优先级，把.es6放在前面可以让TS优先匹配该后缀的文件。

3. 添加类型声明（可选但推荐） #

如果你的.es6文件没有对应的类型定义，创建一个typings.d.ts文件（放在项目根目录或源码目录下），声明所有.es6模块的类型，避免类型检查报错：

declare module "*.es6" {
  // 如果你的模块有默认导出，用下面的写法
  const defaultExport: any;
  export default defaultExport;

  // 如果是命名导出，可补充对应的类型声明
  // export const foo: string;
}

确保这个声明文件被TS识别，可将其路径加入tsconfig.json的include列表中。

完整示例配置 #

调整后的tsconfig.json大概是这样：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ESNext",
    "allowJs": true,
    "resolveExtensions": [".es6", ".js", ".ts", ".tsx", ".json"],
    "strict": false, // 根据项目需求调整严格模式
    "outDir": "./dist"
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.js",
    "src/**/*.es6",
    "./typings.d.ts"
  ],
  "exclude": ["node_modules", "dist"]
}

完成以上配置后，VSCode中的TS错误提示应该会消失，同时Babel/Webpack的编译流程不受影响。

内容的提问来源于stack exchange，提问作者c.m