如何不依赖Storybook实现自定义组件Props及类型的表格展示

这个需求完全可以实现，不需要引入完整的Storybook。

要实现这个功能首先要明确：TypeScript的类型会在编译阶段被擦除，浏览器运行时没法直接读取组件的Props类型定义，你可以根据自己的技术栈选下面两类方案：

静态编译提取类型（推荐TS项目使用） #

这类方案在项目构建阶段就把组件的Props信息提取成结构化数据，文档站直接读取数据渲染表格，不需要给组件额外加运行时代码。

• 如果想自己控制提取逻辑，可以直接基于TS官方的编译器API写简单的解析脚本：遍历组件对应的Props类型AST节点，自动抓取每个属性的名称、类型、是否必填、默认值、注释说明等信息，导出为JSON文件供文档站调用即可。
• 不想自己写解析逻辑可以直接用react-docgen-typescript，这是Storybook内部解析组件Props的核心依赖，本身是独立工具包，可以单独引入使用。它能自动识别TS编写的React组件Props，支持解析联合类型、函数类型、泛型、JSDoc注释、默认值等绝大多数场景，输出的结构化数据可以直接喂给你写的属性表格组件，渲染效果和Storybook的Args表完全一致。

运行时声明类型 #

这类方案不需要额外的编译解析步骤，直接在组件编写时附加Props的元信息，文档站运行时读取元信息渲染表格。

• 最灵活的方式是给组件挂载静态属性，比如给每个组件增加propDefs静态字段，手动维护每个Prop的名称、类型、说明信息，属性表格组件直接读取这个字段渲染即可，示例写法：

const Button = ({ variant, onClick }) => {
  // 组件业务逻辑
}
// 附加Props元信息
Button.propDefs = [
  { name: 'variant', type: 'ButtonVariant', required: true },
  { name: 'onClick', type: 'function', required: false }
]

• 如果是React项目，也可以直接用prop-types库做运行时类型声明，属性表格组件直接解析组件上的propTypes字段就能拿到类型信息，缺点是需要同时维护TS类型和运行时的PropTypes声明，也可以配套工具从TS类型自动生成PropTypes减少重复工作。

你已经有了目标表格的HTML结构，只要写一个接收组件作为入参的函数式组件，先通过上面任意一种方式拿到组件的Props结构化列表，再遍历列表渲染<tr>行填充Prop名称和类型即可，实现成本很低。
你期望的最终渲染效果如下：

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