TypeScript编译时.d.ts声明文件输出路径错误如何解决

问题原因 #

你当前tsconfig没有显式设置rootDir参数，tsc会自动将所有输入文件的公共父目录（即项目根目录，因为你include的文件路径都带src/前缀）作为编译根目录，生成声明文件时会保留完整的相对路径，和outDir拼接后就出现了多余的dist/src/层级。

解决方案 #

你可以根据需求选择以下任意一种方法：

方法1：修改tsconfig配置（推荐，长期适用）

在tsconfig.json的compilerOptions中新增rootDir配置，显式指定源文件根目录：

{
  "compilerOptions": {
    // 原有配置保留，新增以下行
    "rootDir": "./src"
  }
}

如果你的目标是让.d.ts和当前Babel输出的JS文件完全同级（即dist/Select/index.d.ts和dist/Select/index.js对应），可以进一步调整：

• 将rootDir改为./src/components
• 将include数组改为["./src/components/**/*"]

方法2：修改构建命令（快速生效，无需改动配置）

在package.json的build命令中，新增移动声明文件、清理冗余目录的逻辑：

"build": "rm -rf dist && npx tsc && mv dist/src/components/* dist/ && rm -rf dist/src && NODE_ENV=production babel src/components --out-dir dist --extensions '.tsx' --presets @babel/preset-typescript --presets @babel/preset-env --ignore __tests__,__snapshots__,__mocks__,stories.js,**/*.test.tsx"

执行该命令后，生成的.d.ts会直接和对应JS文件存放在同一目录。

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