如何在Storybook+TypeScript中推断引用其他组件接口的Prop控件？

当组件Props中的类型是引用其他组件的联合类型（比如NewComponentProps['color']指向ButtonProps['color']）时，Storybook的自动类型推断失效，无法生成选择器控件，可通过以下几种方式解决：

1. 显式导出共享的联合类型 #

把被引用的联合类型单独提取并导出，让Storybook能直接识别这个类型：

// Button.tsx
export type ButtonColor = 'red' | 'green' | 'blue';

export interface ButtonProps {
  color: ButtonColor;
  // 其他Props
}

// NewComponent.tsx
import { ButtonColor } from './Button';

export interface NewComponentProps {
  color: ButtonColor;
  // 其他Props
}

这样Storybook就能自动为NewComponent的color生成带选项的<select>控件，无需额外配置。

2. 通过argTypes手动指定控件 #

如果无法修改原有类型定义，可在组件的stories文件中显式配置控件：

// NewComponent.stories.tsx
import { Meta, StoryObj } from '@storybook/react';
import NewComponent from './NewComponent';
import { ButtonProps } from './Button';

type ButtonColor = ButtonProps['color'];
const colorOptions: ButtonColor[] = ['red', 'green', 'blue'];

const meta: Meta<typeof NewComponent> = {
  title: 'Components/NewComponent',
  component: NewComponent,
  argTypes: {
    color: {
      control: {
        type: 'select',
        options: colorOptions,
      },
    },
  },
};

export default meta;
type Story = StoryObj<typeof NewComponent>;

export const Default: Story = {
  args: {
    color: 'red',
  },
};

这种方式直接强制指定控件类型和选项，避开类型推断的问题。

3. 检查Storybook的TypeScript解析配置 #

确保Storybook使用的react-docgen-typescript工具能正确解析间接引用的类型，在.storybook/main.ts中确认配置：

// .storybook/main.ts
export default {
  stories: ['../src/**/*.stories.tsx'],
  addons: ['@storybook/addon-essentials'],
  typescript: {
    reactDocgen: 'react-docgen-typescript',
    check: true,
  },
};

部分旧版本的react-docgen-typescript对间接类型引用支持不佳，升级工具版本也可能解决问题。

总结 #

优先选择显式导出共享类型的方案，既能让Storybook自动推断控件，也能提升代码的可维护性；只有在无法修改类型结构时，再考虑用argTypes手动配置控件。

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