Monorepo中.d.ts扩展Material-UI接口失效问题排查求助

问题分析 #

你在pnpm monorepo中尝试扩展Material-UI的CommonColors接口，但其他包无法识别扩展的属性（如red2），核心原因是类型声明文件未被正确加载，以及monorepo包的类型配置存在问题。

解决方案 #

1. 修正types包的配置与结构 #

调整types/package.json

确保包的类型入口被正确声明，让其他包能自动识别类型文件：

{
  "name": "@iw/types",
  "version": "1.0.0",
  "types": "./src/material-ui.d.ts", // 直接指向你的类型声明文件
  "scripts": {
    "build": "tsc"
  },
  "dependencies": {
    "@material-ui/core": "^4.12.4" // 必须依赖Material-UI才能扩展其类型
  }
}

简化types/src结构

不需要index.ts导入.d.ts文件，TypeScript会自动识别符合规范的类型声明文件。删除types/src/index.ts，只保留material-ui.d.ts。

配置types/tsconfig.json

确保TypeScript正确生成和识别类型：

{
  "compilerOptions": {
    "declaration": true,
    "declarationDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "module": "ESNext",
    "target": "ESNext"
  },
  "include": ["./src/**/*.d.ts"]
}

2. 调整mui-test包的配置 #

添加依赖

在mui-test/package.json中添加对@iw/types的依赖（开发依赖或生产依赖均可）：

{
  "name": "@iw/mui-test",
  "version": "1.0.0",
  "dependencies": {
    "@material-ui/core": "^4.12.4",
    "@iw/types": "workspace:*" // 使用pnpm workspace协议关联monorepo包
  },
  "scripts": {
    "build": "tsc"
  }
}

修改mui-test/tsconfig.json

确保TypeScript加载@iw/types的类型声明：

{
  "compilerOptions": {
    "strict": true,
    "module": "ESNext",
    "target": "ESNext",
    "types": ["@iw/types"] // 显式指定要加载的类型包
  },
  "include": ["./src/**/*.ts"]
}

简化业务代码

不需要手动导入@iw/types，TypeScript会自动加载配置的类型：

import { useTheme } from "@material-ui/core";

export const useMUITest = (): void => {
    const theme = useTheme();

    console.log(theme.palette);
    console.log(theme.palette.common);
    console.log(theme.palette.common.red2); // 现在应该能识别到扩展的属性
};

3. 验证修复 #

1. 在monorepo根目录执行pnpm install，确保依赖安装完成
2. 构建types包：pnpm --filter @iw/types build
3. 构建mui-test包：pnpm --filter @iw/mui-test build

此时构建报错应该消失，扩展的CommonColors属性能被正确识别。

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