TypeScript编译ES2020模块时如何自动为import路径添加.js后缀

原生TypeScript不支持在编译输出阶段自动为相对导入路径添加.js后缀。TypeScript官方团队明确将工具定位为类型检查器与语法转译器，不会修改用户编写的导入路径字符串，避免破坏运行时代码的预期逻辑。

以下是可行的落地解决方案：

• 方案1：直接在TS源码中编写带.js后缀的导入路径
  这是成本最低的方案，TypeScript原生支持识别带.js后缀的导入规则，当你写import { Included } from "./Included.js"时，TS会自动匹配对应路径下的Included.ts/Included.tsx/Included.d.ts文件，不会产生类型报错，编译后路径会原样保留，完全符合浏览器ES模块的导入要求。
• 方案2：使用tsc-alias工具自动补全后缀
  如果你不想手动修改所有存量导入语句，可以在编译流程中加入tsc-alias工具处理路径转换：
  1. 安装开发依赖：npm install -D tsc-alias
  2. 修改package.json中的构建脚本："build": "tsc && tsc-alias"
  3. 在tsconfig.json的compilerOptions中添加"declaration": true配置即可正常使用，该工具会自动将编译后JS文件的相对导入路径补全.js后缀。
• 方案3：使用轻量编译工具替代原生tsc
  如果你不需要打包为单文件，仅需要处理路径后缀，可以用esbuild等轻量工具完成编译：安装esbuild和对应的TS插件后，配置编译规则即可自动完成路径后缀补全，编译速度也比原生tsc更快。

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