我如何使用 jsdoc 注释注释 React.forwardRef，以便智能感知可以显示底层组件? [英] How do i annotate React.forwardRef with jsdoc comments so that intellisense can show up for the underlying component?

问题描述

我有一个以这种方式编写为函数的 React 组件:

I have a React component written as a function this way:

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

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

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

when using this component, I get the autocompletion / intellisense in vscode

如果我将此组件包装在 React.forwardRef 中，导出默认 React.forwardRef((props, ref) => )

If i wrap this component in React.forwardRef, export default React.forwardRef((props, ref) => <Button btnRef={ref} {...props} />)

然后我获得了 forwardRef 函数的智能感知，这对我的使用没有帮助，因为现在我无法让道具自动完成/显示在智能感知中.

then I get the intellisense for the forwardRef function, which does not help my usage, because now there is no way for me to get the props autocompleted / show up in intellisense.

我尝试使用 jsdoc extends/augments 注释 React.forwardRef 但没有成功，在这种情况下，即使是默认的智能感知forwardRef 使用停止显示.(我相信这是因为 vscode 比 jsdoc 注释更偏爱可用类型).有没有办法让我的包装组件的智能感知与未包装的组件类似?这符合我以与未包装组件类似的方式使用包装组件的理解.

I have tried annotating the React.forwardRef with jsdoc extends / augments but to no success, in that case even the default intellisense for forwardRef usage stops showing up. (I believe this is because vscode gives more preference to available types than jsdoc comments). Is there a way for me to get the intellisense for the wrapped component working similar to the unwrapped component? This would be inline with the understanding that I have for using the wrapped component in a similar way as the unwrapped component.

推荐答案

这取决于您希望对类型有多迂腐.通常，这些组件的使用与其他功能组件几乎相同，因此最简单的方法是将结果的类型声明为功能组件.props 的技巧是首先为 prop 类型创建一个变量，并为泛型类型引用它(或者至少，我还没有找到一种方法来让它在没有间隙值的情况下工作):

It depends how pedantic you want to be about the types. Generally, the use of these components is pretty much the same as other functional components, so the simplest way is to just declare the type of the result to be a functional component. The trick for the props is to first create a variable for the prop types and refer to that for the generic type (or at least, I haven't found a way to make it work without that interstitial value):

/**
 * @type React.FC<ButtonPropTypes>
 */
const Button = forwardRef(({ text, icon }, ref) => (
  <button ref={ref}>{text}{icon}</button>
))

const ButtonPropTypes = {
  text: string.isRequired,
  icon: string.isRequired,
  // `ref` isn't a "real" prop, so `prop-types` will not not actually validate
  // this one, but this adds it to the intellisense list if desired. Feel
  // free to just omit it.
  ref: oneOf(shape({ current: any }), func),
}

Button.propTypes = ButtonPropTypes

如果你想更准确一点，forwardRef的返回类型实际上是:

If you want to be more accurate, the return type of the forwardRef is actually:

/**
 * @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

但是，IntelliSense 似乎无法识别 ref 道具(工作正常，只是不在列表中).

However, the IntelliSense doesn't seem to recognize the ref prop (works fine, just isn't in the list).

类型的定义在这里:第一个参数是将分配给 ref 的值的预期类型.但是，由于您实际上并没有静态地输入无论如何都会传入的 ref，因此您可能只是选择使用 ? 省略那个:

The definition for the type is here: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/3423b4fc3e3da09f8acc386bc2fee6fb8f5e0880/types/react/index.d.ts#L559 The first parameter is the expected type for value that will be assigned to the ref. However, since you're not actually statically typing the ref that you would pass in anyway, you might just choose to omit that one with a ?:

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

我认为你对最后一部分的意思是你不会同时拥有未包装和包装的版本.这是典型的模式，因为保留两者并没有真正的用处.但是，顺便说一句，您可以直接引用任何其他组件的 propTypes 值以用作通用类型，例如:

I think what you mean about the last part is that you wouldn't have both the unwrapped and the wrapped version. That's the typical pattern, as there is no real use for keeping both. However, as an aside, you can directly refer to the propTypes value of any other component for use as a generic type such as:

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

这篇关于我如何使用 jsdoc 注释注释 React.forwardRef，以便智能感知可以显示底层组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！