能否将Material UI设为peerDependency同时将其类型作为DevDependency保留？

问题根源 #

1. 你仅将@material-ui/core声明在peerDependencies中，未安装到开发依赖，导致打包时TS找不到对应的类型定义
2. 手动添加的src/@types/material-ui/index.d.ts全局模块声明覆盖了Material UI官方自带的类型定义，将整个模块标记为无导出具体类型的匿名模块，才会出现TextFieldProps无法作为类型使用的报错
3. tsconfig.json中手动配置的typeRoots仅包含本地自定义类型目录，覆盖了TS默认读取node_modules/@types的规则，进一步阻断了第三方包类型的自动识别

解决方案 #

第一步：删除无效的全局类型声明 #

直接删除整个src/@types/material-ui目录，该声明会覆盖官方类型，属于冗余错误配置。

第二步：将Material UI添加到开发依赖 #

执行安装命令，将和peerDependencies中版本一致的@material-ui/core安装到devDependencies：

npm install @material-ui/core@^4.11.4 --save-dev

开发依赖仅在本地打包、开发阶段使用，Rollup的peerDepsExternal插件会自动将peerDependencies中的包排除在打包产物外，不会增加组件库的发布体积。

第三步：修正tsconfig.json的typeRoots配置 #

将node_modules/@types补充到typeRoots数组中，恢复TS读取第三方包类型的默认逻辑：

{
  "compilerOptions": {
    // 其余配置保持不变
    "typeRoots": ["./src/@types", "./node_modules/@types"]
  }
}

验证效果 #

完成以上改动后重新打包，不会再出现模块找不到、类型无法使用的报错，打包后的组件库体积和你之前设置peerDependency时的体积一致（约101kB），同时可以正常使用Material UI的所有类型定义做校验，宿主项目安装组件库时也会自动要求安装对应版本的Material UI作为依赖。

内容的提问来源于stack exchange，提问作者André Borba Netto Assis