Javascript 如何用jsdoc注释React.forwardRef，以便intellisense可以显示底层组件？

我有一个React组件，它是这样写的：

function Button({ text, icon }) {
  return ...
}

Button.propTypes = {
  text: PropTypes.string.isRequired,
  icon: PropTypes.string.isRequired
}

使用此组件时，我在vscode中获得自动完成/智能感知

如果我将此组件包装在React.forwardRef中，

导出默认React.forwardRef（（props，ref）=>）

然后我得到了

forwardRef

函数的intellisense，这对我的使用没有帮助，因为现在我无法在intellisense中自动完成/显示道具

---

我曾尝试用jsdoc

extends

/

augments

注释

React.forwardRef

，但没有成功，在这种情况下，即使是

forwardRef

的默认intellisense用法也会停止显示。（我认为这是因为vscode比jsdoc注释更倾向于使用可用类型）。对于我来说，有没有一种方法可以让封装组件的智能感知与未封装组件的工作方式类似？这与我的理解是一致的，我使用包装组件的方式与使用未包装组件的方式类似。

这取决于你对类型的理解。通常，这些组件的使用与其他功能组件几乎相同，因此最简单的方法就是将结果的类型声明为功能组件。道具的诀窍是首先为道具类型创建一个变量，并引用泛型类型的变量（或者至少，我还没有找到一种方法使它在没有间隙值的情况下工作）：

然而，IntelliSense似乎无法识别

ref

prop（工作正常，只是不在列表中）

类型的定义如下： 第一个参数是将分配给ref的值的预期类型。但是，由于您实际上并不是静态地键入要传入的

ref

，因此您可以选择用

？

省略该参数：

/**
 * @type React.ForwardRefRenderFunction<?, ButtonPropTypes>
 */

---

我知道如何在typescript中实现这一点，但我不知道仅仅使用JSDoc是什么样子。似乎您希望将

btnRef

作为

按钮的道具。是的，btnRef将是按钮的道具这似乎至少对我的特定用例有效。非常感谢！现在我只需要理解为什么@type注释可以工作，但不能扩展/扩展，我用它来处理一般的未包装组件谢谢你，Erich！我是这样使用它的：
@type React.ForwardRefRenderFunction
，它工作起来很有魅力。您可能不希望将
React.FunctionComponent
作为第一个通用参数。该参数用于存储在所提供的
ref
中的任何内容，它始终是某种DOM元素。因此，例如，在上面的示例中，
ref
包含
按钮的实际HTML DOM元素。intellisense在很大程度上忽略了第一个参数，这就是为什么我建议您只使用
？
，但为了文档中的准确性，它将是封装的本机元素类型。
/**
 * @type React.ForwardRefRenderFunction<HTMLButtonElement, ButtonPropTypes>
 */
const Button = forwardRef(({ text, icon }, ref) => (
  <button ref={ref}>{text}{icon}</button>
))

const ButtonPropTypes = {
  text: string.isRequired,
  icon: string.isRequired,
}

Button.propTypes = ButtonPropTypes

/**
 * @type React.ForwardRefRenderFunction<?, ButtonPropTypes>
 */

/**
 * @type React.FC<UnWrappedButton.propTypes>
 */