Storybook中带forwardRef的React组件Props注释无法生成Autodocs

组件代码 #

interface SearchBoxProps {
  /** 可选，作为受控组件时的输入值 */
  value?: string;

  /** 可选，输入值变化时的回调函数 */
  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
  [restOfProps: string]: any;
}

/** 用于搜索用户的组件 */
const SearchBox = React.forwardRef<HTMLInputElement, SearchBoxProps>((props, ref) => {
  return (
    ....
  )
})

export default SearchBox

Storybook故事代码 #

import type {Meta, StoryObj} from '@storybook/react';
import SearchBox from "./SearchBox";

const meta = {
  title: 'Search Box',
  component: SearchBox,
  parameters: {
    backgrounds: {
      default: 'dark'
    },
    layout: 'centered',
  },
  tags: ['autodocs'],
} satisfies Meta<typeof SearchBox>;

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

export const Search: Story = {
  args: {
    value: 'hello',
    onChange: () => {},
  },
}

问题说明 #

组件本身的JSDoc注释已在Storybook中正常显示，但Props的注释既没有生成对应文档，VSCode的智能感知也无法捕获这些注释内容。

解决方法 #

• 调整TypeScript配置：打开项目的tsconfig.json，确保compilerOptions中启用declaration: true，同时include数组包含组件所在的文件路径，让TypeScript生成正确的类型声明文件，帮助VSCode和Storybook解析注释。
• 改用interface定义Props：将原有的对象字面量形式的SearchBoxProps改为interface类型，部分工具链对interface的注释解析支持更稳定。
• 确认Storybook版本与配置：使用Storybook 7及以上版本，该版本对TypeScript类型注释的自动解析支持更完善。如果自动解析仍有问题，可在meta配置中手动添加argTypes字段，显式指定每个Props的描述。
• 同步VSCode的TypeScript版本：点击VSCode右下角的TypeScript版本标识，切换为项目本地安装的TypeScript版本，避免因版本不一致导致注释无法识别。

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