TypeDoc：如何在React组件文档页直接展示组件Props列表？

问题描述 #

我有如下TypeScript代码：

/**
  * Interface of props of the Component
  */
export interface ComponentProps {
  /**
   * Name of sth
   */
  name: string,
  /**
   * happening on click component
   */
  onClick: () => void
}

/**
 * @category Component
 */
export function Component({ name, onClick }: ComponentProps) {
  (...)
}

使用TypeDoc生成文档时，出现以下情况：

• Component页面中，Props仅以__namedParameters: ComponentProps形式展示（其中ComponentProps带有跳转链接）
• ComponentProps生成独立页面，展示完整的类型与属性名称列表

请问如何配置TypeDoc，让带类型的Props列表直接显示在Component文档页面中？

解决方案 #

方法一：命令行参数配置 #

生成文档时添加--expand-properties参数，直接展开所有接口类型的属性：

typedoc --expand-properties src/your-component-file.ts

方法二：配置文件全局设置 #

在项目的typedoc.json配置文件中，添加expandProperties字段并设置为true：

{
  "expandProperties": true
}

启用上述配置后，Component页面会直接展示ComponentProps的所有属性（包含类型定义和注释），无需跳转至独立的接口页面。

可选：手动通过注释声明 #

如果你只需要针对特定组件展开Props，可以在组件的JSDoc注释中使用@param标签手动声明每个属性：

/**
 * @category Component
 * @param name - Name of sth
 * @param onClick - happening on click component
 */
export function Component({ name, onClick }: ComponentProps) {
  (...)
}

这种方式需要手动同步注释与接口定义，适合局部需求场景，但维护成本高于全局配置。

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