如何使用JSDoc为React复合组件FormTest.HelpText编写规范文档？

用户已有一个用JSDoc编写了规范文档的HelpText组件，鼠标悬停该组件时可正常查看其文档：

/**
 * 为用户提供帮助文本的React组件
 * @typedef HelpText
 * @type {typeof HelpText}
 * @param id - 帮助文本元素的ID（必填）
 * @param text - 要显示的文本信息（可选）
 * @param cssClasses - 应用于帮助文本元素的CSS类（可选）
 * @param children - 要包含在帮助文本元素中的子组件（可选），可替代text参数使用
 * @returns 带有指定ID和CSS类的memoized div元素，包含文本和/或子组件
 */
const HelpText: React.FC<IHelpText> = ({
  id,
  text,
  cssClasses = "form-text",
  children,
}) => {
  return (
    <div id={id + "-helpText"} className={cssClasses}>
      {text}
      {children}
    </div>
  );
};

export default HelpText;

现在用户将该组件挂载为复合组件FormTest的子组件：

import HelpText, { IHelpText } from "../HelpText";

interface IFormTestProps {
    children: React.ReactNode;
}

const FormTest: React.FC<IFormTestProps> & { HelpText: React.FC<IHelpText> } = ({ children }) => {    
    return (
    <>
        {children} 
    </>
    );
};

FormTest.HelpText = HelpText;

export default FormTest;

请问如何通过JSDoc让FormTest.HelpText的文档能正常显示？

方案1：直接为FormTest.HelpText添加JSDoc注释 #

在赋值语句上方添加与原HelpText一致的JSDoc，直接复用原组件的文档内容：

/**
 * 为用户提供帮助文本的React组件
 * @param id - 帮助文本元素的ID（必填）
 * @param text - 要显示的文本信息（可选）
 * @param cssClasses - 应用于帮助文本元素的CSS类（可选）
 * @param children - 要包含在帮助文本元素中的子组件（可选），可替代text参数使用
 * @returns 带有指定ID和CSS类的memoized div元素，包含文本和/或子组件
 */
FormTest.HelpText = HelpText;

方案2：通过类型声明自动继承文档 #

修改FormTest的类型定义，让HelpText属性直接复用原组件的typeof HelpText类型，IDE会自动识别并继承原组件的JSDoc：

// 将类型声明里的React.FC<IHelpText>替换为typeof HelpText
const FormTest: React.FC<IFormTestProps> & { HelpText: typeof HelpText } = ({ children }) => {    
    return (
    <>
        {children} 
    </>
    );
};

FormTest.HelpText = HelpText;

方案3：为FormTest添加类型注释关联子组件 #

给FormTest的整体类型添加JSDoc，明确标注HelpText属性的功能和来源：

/**
 * 表单容器组件
 * @property {typeof HelpText} HelpText - 内置的帮助文本组件，功能与独立的HelpText组件完全一致
 */
const FormTest: React.FC<IFormTestProps> & { HelpText: typeof HelpText } = ({ children }) => {    
    return (
    <>
        {children} 
    </>
    );
};

FormTest.HelpText = HelpText;

以上三种方案都能实现鼠标悬停FormTest.HelpText时正常显示原组件的文档信息，其中方案2最简洁，通过类型复用直接完成文档继承。

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