引入公司内部TypeScript版Storybook组件库到React项目报类型声明错误如何解决

该报错的核心原因是你使用的组件库虽然基于TypeScript开发，但发布到npm时未同步输出并打包类型声明文件，也没有单独提交对应的声明包到@types官方源，因此TS编译阶段无法识别模块的类型定义，安装@types包的操作自然返回404。

分为组件库侧优化和业务项目侧兼容两类，优先选择组件库侧修改的方案：

组件库侧优化（推荐） #

修改组件库的打包配置后重新发布，所有依赖该库的项目都可以直接复用类型定义：

• 打开组件库的tsconfig.json，开启声明文件生成配置：

  {
    "compilerOptions": {
      "declaration": true,
      "declarationDir": "./dist/types",
      "emitDeclarationOnly": false
    }
  }
  

• 检查组件库package.json，添加类型声明入口字段：

  {
    "main": "./dist/bundle.js",
    "types": "./dist/types/index.d.ts"
  }
  

  注意types字段的路径需要和你实际打包后声明文件的入口路径保持一致。
• 重新打包组件库后发布新版本，业务项目安装新版本即可解决报错。

业务项目侧临时兼容 #

如果你暂时没有权限修改组件库配置，可以用以下方案临时解决：

• 方案1：在项目src目录下新建typings.d.ts文件，添加模块声明：

  declare module '@myCompany/ui-components-library' {
    // 可以手动补充你已用到的组件的类型定义，未手动定义的内容默认走any类型
    export const Button: React.FC<{
      type?: 'primary' | 'default'
      onClick?: () => void
    }>
  }
  

• 方案2：临时关闭TS的隐式any校验，修改项目tsconfig.json配置：

  {
    "compilerOptions": {
      "noImplicitAny": false
    }
  }
  

  该方案会全局关闭隐式any校验，可能降低项目的类型安全性，不推荐长期使用。

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