如何在TypeScript Monorepo中配置多目录层级paths别名

这种配置完全可行，问题出在子项目tsconfig的paths处理逻辑上——TypeScript的extends不会自动合并paths配置，子项目里直接定义paths会覆盖根配置的内容，导致全局别名失效。下面是具体的解决步骤：

1. 根目录 tsconfig.base.json 配置 #

只保留全局共用的别名和基础编译选项，确保所有子项目都能复用@components别名：

{
  "compilerOptions": {
    "baseUrl": ".", // 以仓库根目录为基准路径
    "paths": {
      "@components/*": ["./packages/components/*"] // 全局匹配components下的所有模块
    },
    // 其他通用配置：如 target、module、strict 等按需添加
  },
  "exclude": ["node_modules"]
}

2. app 子项目 tsconfig.json 配置 #

继承根配置的同时，手动合并全局别名与app专属的~别名，避免覆盖根配置的paths：

{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    // 这里可添加app专属编译选项，如 outDir、rootDir 等
    "paths": {
      // 保留全局别名，防止被覆盖
      "@components/*": ["../../packages/components/*"],
      // 配置app专属的~别名，匹配src下所有文件
      "~/*": ["./src/*"]
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

3. components 子项目 tsconfig.json 配置 #

只需继承根配置即可，无需额外修改paths：

{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    // 添加components专属编译选项
  },
  "include": ["**/*"],
  "exclude": ["node_modules"]
}

验证效果 #

• 在app/src的文件中，既可以用import { Button } from '@components/Button'导入组件库模块，也可以用import { formatDate } from '~/utils/format'导入app内部模块，无需相对路径。
• 在components的文件中，同样可以用@components/*别名导入自身模块，不受~别名影响。

如果编辑器（如VS Code）没有立即识别别名，可通过Ctrl+Shift+P调出命令面板，选择「TypeScript: Restart TS Server」刷新服务。

内容的提问来源于stack exchange，提问作者Paul Razvan Berg