TypeScript编译后@路径在JavaScript中无法解析问题

问题重现 #

TypeScript中配置了tsconfig.json的paths使用@别名导入文件，但编译为JavaScript后，代码中仍保留@config这类路径，导致Node.js无法识别。已尝试tsc-alias、tscpaths工具及重启TypeScript服务器，构建命令为"build": "tsc -p tsconfig.json && tsc-alias -p tsconfig.json"。

解决方案 #

1. 升级并优化tsc-alias使用 #

• 先升级到最新版tsc-alias，规避版本兼容问题：

  npm install tsc-alias@latest --save-dev
  

• 编译前清空dist目录，避免旧文件干扰路径替换：
  修改构建命令为：

  "build": "rm -rf dist && tsc -p tsconfig.json && tsc-alias -p tsconfig.json"
  

  Windows环境替换为：

  "build": "rd /s /q dist && tsc -p tsconfig.json && tsc-alias -p tsconfig.json"
  

2. 改用编译时路径替换工具 #

如果tsc-alias仍不生效，可使用typescript-transform-paths在编译阶段直接完成路径替换：

• 安装依赖：

  npm install typescript-transform-paths ttypescript --save-dev
  

• 修改tsconfig.json，添加插件配置：

  {
    "compilerOptions": {
      // 保留原有配置
      "plugins": [
        {"transform": "typescript-transform-paths"}
      ]
    }
  }
  

• 替换构建命令中的tsc为ttsc：

  "build": "rm -rf dist && ttsc -p tsconfig.json"
  

3. 验证配置有效性 #

• 执行以下命令查看实际生效的TypeScript配置，确认paths映射被正确加载：

  tsc --showConfig
  

• 检查目标文件路径是否存在，比如src/config/env/env.config.ts是否在对应位置，避免因文件缺失导致替换失败。

4. 排查工具冲突 #

如果项目使用ts-node、nodemon等工具，需确保它们的配置未覆盖路径规则。比如ts-node需在tsconfig.json中添加：

{
  "ts-node": {
    "require": ["tsconfig-paths/register"]
  }
}

注意此配置仅影响开发阶段，编译阶段需确保无其他工具修改dist目录文件。

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