TypeScript中React Hook返回对象的JSDoc无法显示求助

你遇到的是TypeScript类型提示的常见行为——当Hook返回的对象用接口作为类型标注时，VSCode默认只会显示类型名称，不会自动关联接口的JSDoc注释。以下是两种可行的解决方式：

方法一：给返回的对象字面量直接添加JSDoc #

在return的对象字面量上方添加注释，悬停对象时就能直接看到描述：

/**
 * 用于管理测试流程的自定义Hook
 */
function useTestHook() {
  /**
   * 启动测试流程
   */
  const start = () => { /* 实现逻辑 */ };

  /**
   * 结束测试流程
   */
  const end = () => { /* 实现逻辑 */ };

  // 给返回的控制器对象添加注释
  return /** 
   * 测试流程控制器对象
   * 提供start/end方法用于控制测试的启动与结束
   */{ start, end };
}

interface UseTestHookController {
  start: () => void;
  end: () => void;
}

方法二：在Hook的JSDoc@returns标签中补充对象描述 #

直接在Hook的注释里明确说明返回对象的作用，替代接口注释的关联：

/**
 * 用于管理测试流程的自定义Hook
 * @returns {UseTestHookController} 测试流程控制器，包含start（启动测试）和end（结束测试）两个方法
 */
function useTestHook(): UseTestHookController {
  /**
   * 启动测试流程
   */
  const start = () => { /* 实现逻辑 */ };

  /**
   * 结束测试流程
   */
  const end = () => { /* 实现逻辑 */ };

  return { start, end };
}

/**
 * 测试流程控制器接口定义
 */
interface UseTestHookController {
  start: () => void;
  end: () => void;
}

额外提示 #

如果设置后还是不生效，可以尝试在VSCode中执行Ctrl+Shift+P打开命令面板，选择TypeScript: Restart TS Server，强制刷新类型服务。

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