如何在NX+NextJS monorepo中配置全局TypeScript类型声明目录

问题根因 #

TypeScript 继承配置的规则为：配置项内的所有相对路径，会相对于当前生效的tsconfig文件所在目录进行解析。你在根目录tsconfig.base.json中填写的"types/"路径，被apps/myApp/tsconfig.json这类子项目配置继承后，会被解析为apps/myApp/types，因此仅子项目内部的types目录可被识别，根目录types目录无法命中。

可行解决方案 #

方案1：调整为相对根路径（无配置格式改造，适配标准NX目录结构） #

NX标准结构中所有子项目均存放在apps/*、libs/*二级目录下，因此直接调整tsconfig.base.json中的路径层级即可：

// tsconfig.base.json
{
  "compilerOptions": {
    "typeRoots": [
      "node_modules/@types",
      "node_modules/next/types",
      "../../types" // 从子项目二级目录往上退两层，即可命中根目录types
    ]
  },
  "include": [
    "../../types/**/*.d.ts", // 全局类型文件加入编译上下文
    "**/*.ts",
    "**/*.tsx",
    "**/*.js",
    "**/*.jsx"
  ]
  // 其余原有配置保持不变
}

配置完成后执行nx reset清理NX缓存，重启IDE的TypeScript语言服务即可生效。

方案2：使用JS格式配置写绝对路径（适配任意目录层级，更稳定） #

如果你的子项目存在更深的目录层级，相对路径适配成本高，可以将根目录配置改为JS格式，用Node路径API写绝对路径，不受子项目层级影响：

1. 将根目录tsconfig.base.json重命名为tsconfig.base.js，修改内容如下：

// tsconfig.base.js
const path = require('path');

module.exports = {
  compilerOptions: {
    typeRoots: [
      path.resolve(__dirname, 'node_modules/@types'),
      path.resolve(__dirname, 'node_modules/next/types'),
      path.resolve(__dirname, 'types')
    ],
    // 其余原有compilerOptions配置保持不变
  },
  "include": [
    path.resolve(__dirname, 'types/**/*.d.ts'),
    "**/*.ts",
    "**/*.tsx"
  ]
  // 其余原有配置保持不变
}

2. 所有子项目的tsconfig.json中，将extends路径改为对应的JS配置：

// apps/myApp/tsconfig.json
{
  "extends": "../../tsconfig.base.js"
  // 其余原有配置保持不变
}

额外优化（可选） #

如果需要显式导入类型而非全局挂载，可以在compilerOptions.paths中添加别名配置，避免深层相对路径导入：

// tsconfig.base.json compilerOptions 中添加
"paths": {
  "@your-org/types": ["./types/index.ts"]
}

使用时直接导入即可：import type { CommonType } from '@your-org/types'。

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