React.memo包裹组件后VSCode无法显示JSDoc注释的解决办法咨询

我之前也碰到过这个烦人的问题！VSCode的语言服务（不管是JS还是TS环境）有时候没办法自动透过React.memo的包裹，识别到原始组件上的JSDoc注释，不过我试了几个亲测有效的解决办法，分享给你：

• 用类型断言告诉VSCode组件的真实类型
  这种方法不需要重复写JSDoc，只需要在React.memo导出语句上方加一行类型注释，明确告诉编辑器，memo处理后的组件和原组件的类型（包括注释）完全一致：

  /**
   * 这是我的组件的JSDoc说明
   * @param {Object} props - 组件属性
   * @param {string} props.name - 要显示的用户名
   */
  const MyComponent = ({ name }) => {
    return <div>Hello, {name}!</div>;
  };
  
  /** @type {typeof MyComponent} */
  export default React.memo(MyComponent);
  

  这样VSCode就能直接复用原组件的JSDoc，在使用组件时正常显示完整注释。

• 给React.memo显式指定泛型参数（TS项目适用）
  如果你的项目用TypeScript，可以给React.memo显式传入组件的Props类型，让语言服务能精准推断组件的类型信息，连带JSDoc一起识别：

  import React from 'react';
  
  /**
   * 这是我的组件的JSDoc说明
   * @param {Object} props - 组件属性
   * @param {string} props.name - 要显示的用户名
   */
  type MyComponentProps = {
    name: string;
  };
  
  const MyComponent = ({ name }: MyComponentProps) => {
    return <div>Hello, {name}!</div>;
  };
  
  export default React.memo<MyComponentProps>(MyComponent);
  

• 直接给memo后的导出添加JSDoc
  这是最直接的“笨办法”，如果不想折腾类型，直接在导出的React.memo语句上方复制原组件的JSDoc即可，虽然有点重复，但能快速解决问题：

  const MyComponent = ({ name }) => {
    return <div>Hello, {name}!</div>;
  };
  
  /**
   * 这是我的组件的JSDoc说明
   * @param {Object} props - 组件属性
   * @param {string} props.name - 要显示的用户名
   */
  export default React.memo(MyComponent);
  

内容来源于stack exchange