如何让TypeScript转译时为模块标识符添加.js扩展名？

当然可以配置TypeScript编译器自动给相对导入添加.js扩展名，这个功能从TypeScript 4.7版本开始支持，刚好能解决你遇到的Chrome加载404的问题。

你只需要调整tsconfig.json里的编译选项，让TypeScript以ES模块模式输出即可，具体操作步骤如下：

1. 打开项目根目录下的tsconfig.json，修改compilerOptions中的关键配置：
   • 将module设置为ESNext（或ES2020及以上的ES模块格式）
   • 将moduleResolution设置为bundler（适配Vite、Webpack等前端打包场景）或NodeNext（如果是Node.js ES模块环境）
   • 指定target为兼容目标浏览器的ES版本（比如ESNext或ES2020）
   • 确保rootDir（源码目录）和outDir（编译输出目录）配置正确，保证文件路径映射准确

这里给你一个完整的tsconfig.json示例：

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "bundler",
    "target": "ESNext",
    "rootDir": "./src",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"]
}

配置完成后重新编译代码，你原本的TypeScript导入：

import { Game } from './game'

会被转译为带.js扩展名的JavaScript代码：

import { Game } from './game.js'

另外要注意，在浏览器中运行时，HTML里的脚本标签必须加上type="module"，这样浏览器才会按ES模块规则加载文件：

<script type="module" src="./dist/main.js"></script>

如果你的TypeScript版本低于4.7，建议先升级到最新稳定版——旧版本不支持ES模块导入自动补全.js扩展名的特性。

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