React+VSCode中forwardRef组件非TS环境下智能提示解决方案

不用引入TypeScript，仅通过JSDoc注释就能让VSCode识别forwardRef组件的props并提供智能提示，以下是两种简洁的实现方式：

方式一：先定义Props类型再关联组件 #

先通过@typedef单独定义props的类型结构，再给组件指定类型关联：

/**
 * @typedef {Object} SliderProps
 * @property {number} [value=0] - 滑块当前值，默认0
 * @property {function(number): void} [onChange] - 值变化时的回调函数，接收新值作为参数
 */

/**
 * @type {import('react').ForwardRefExoticComponent<SliderProps & import('react').RefAttributes<HTMLElement>>}
 */
const Slider = forwardRef(({value = 0, onChange = () => { /* some function */ }}, ref) => {
  return "whatever"
})

export default Slider;

方式二：直接在组件参数上标注类型 #

如果不想单独定义类型，可以直接在组件的@param注释里写props结构：

/**
 * @component
 * @param {{
 *  value?: number,
 *  onChange?: (value: number) => void
 * }} props
 * @param {import('react').Ref<HTMLElement>} ref
 */
const Slider = forwardRef(({value = 0, onChange = () => { /* some function */ }}, ref) => {
  return "whatever"
})

export default Slider;

原理说明 #

VSCode的JavaScript语言服务支持解析JSDoc注释来推断类型，@component标签会让编辑器识别这是一个React组件，结合props的类型定义，就能自动提供value、onChange等props的智能提示，全程无需TypeScript配置，属于纯JS环境下的低开销方案。

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