Angular 15集成Storybook 6.5时出现TypeScript类型错误求助

算力阿峰

2026-7-28

解决Angular 15 + Storybook 6.5 配置时的React类型错误

这些错误的核心原因是Storybook 6.5的@storybook/theming包依赖的React类型定义，和当前项目中安装的React类型版本不兼容——React 18+ 已移除React.ReactElement、React.ComponentType这类直接导出的类型，但Storybook 6.5仍在使用旧的类型引用方式。

以下是几种可行的解决方法：

锁定兼容的@types/react版本
Storybook 6.5适配React 17的类型定义，安装指定版本的@types/react：
```
npm install @types/react@17.0.60 --save-dev
# 或使用yarn
yarn add @types/react@17.0.60 --dev
```
排除冲突的类型文件
如果上述方法无效，可在项目根目录的tsconfig.json中添加排除规则，避免编译时处理Storybook的React类型文件：
```
{
  "exclude": [
    "node_modules/@storybook/theming/dist/ts3.9/index.d.ts",
    "node_modules/@storybook/**/*.d.ts"
  ]
}
```
升级Storybook到兼容版本（推荐）
Storybook 6.5属于老旧版本，与Angular 15的兼容性较差。建议升级到Storybook 7.x，它对Angular 15有原生支持，且修复了这类类型依赖问题：
```
npx storybook@latest upgrade
```
升级过程中按照终端提示完成配置更新即可。