如何在外部TypeScript组件库中让Storybook自动生成argTypes？

核心问题根源 #

你当前的场景是组件库编译后被外部Storybook项目引用，编译后的产物（.js+.d.ts）丢失了部分类型元数据，或者Storybook的类型推断机制无法跨包解析完整的TS类型与JSDoc注释，导致无法自动生成argTypes。

具体解决方案 #

1. 确保组件库输出完整的类型与JSDoc #

• 在组件库的tsconfig.json中开启以下配置，保证.d.ts文件保留完整的JSDoc和类型信息：

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

• 组件库的package.json正确声明类型入口：

  {
    "types": "./dist/types/index.d.ts",
    "typeVersions": {
      "*": {
        "*": ["./dist/types/*"]
      }
    }
  }
  

2. 配置Storybook插件增强跨包类型推断 #

在Storybook的.storybook/main.js中，配置react-docgen-typescript插件，强制从组件库源码或类型文件解析信息：

module.exports = {
  addons: ['@storybook/addon-docs', '@storybook/addon-controls'],
  typescript: {
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) => prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
      // 指定组件库的tsconfig路径，确保解析完整类型
      tsconfigPath: '../your-component-library/tsconfig.json',
      // 直接包含组件库源码目录，绕过编译产物的限制
      include: ['../your-component-library/src/**/*.tsx']
    }
  }
};

3. 简化Story文件的类型声明 #

无需手动包裹ComponentMeta/ComponentStory这类泛型，改用自动推断写法：

import { Button } from 'your-component-library';

export default {
  title: 'Components/Button',
  component: Button,
  // 无需手动定义argTypes，交由插件自动生成
};

export const Primary = {
  args: {
    variant: 'primary',
    children: 'Click Me'
  }
};

4. 排查编译工具的配置问题 #

• 若组件库用Rollup打包，确保@rollup/plugin-typescript保留注释：

  plugins: [
    typescript({
      tsconfigOverride: { stripComments: false }
    })
  ]
  

• 若用Vite打包，在vite.config.ts中禁用类型注释剥离：

  export default defineConfig({
    build: {
      lib: {
        entry: 'src/index.ts',
        formats: ['es']
      },
      rollupOptions: {
        external: ['react']
      }
    },
    plugins: [react(), dts({ copyDtsFiles: true })]
  });
  

关键注意事项 #

• 保持Storybook与组件库的TypeScript版本同大版本，避免兼容性问题
• 清除Storybook缓存（node_modules/.cache/storybook）和组件库dist目录，重新构建测试

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