Does not work with forwardRef

[Louis Bailey]

When using React.forwardRef, the proptypes are not generated.

[Miles Johnson]

@LankyLou Are you doing something like this?

const Comp = React.forwardRef();

Comp.propTypes = {};

[Miles Johnson]

@LankyLou Bump.

[Tim van der Horst]

I'm doing something like this:

const Comp = forwardRef((props, ref) => { /* … */ });
Comp.displayName = "Comp";
Comp.defaultProps = { /* … */ };
export default Comp;

[Miles Johnson]

I'm not sure how to support this properly since half the time there isn't any type information for the props, for example.

const RefComp = React.forwardRef((props, ref) => <OtherComp ref={ref} {...props} />);

The types are usually defined on OtherComp, which can be located anywhere. This seems like a feature that'll require the type checker.

[Tim van der Horst]

@milesj Is there a way to hint the proper type for the props so that the plugin can manually generate prop types for situations like this? Something like:

type CompProps = { foo: string };
const Comp = forwardRef<HTMLDivElement, CompProps>((props, ref) => { /* … */ });
/* babel-plugin-typescript-to-proptypes ["Comp", "CompProps"] */
Comp.displayName = "Comp";
Comp.defaultProps = { /* … */ };
export default Comp;

So the plugin can skip attempts at finding the Comp component and CompProps type, and just output something like Comp.propTypes = { foo: PropTypes.string };?

[Tim van der Horst]

P.S. Sorry I forgot to write that earlier example as Typescript

[Miles Johnson]

@vdh Yeah, that's about the only solution at the moment.

[Miles Johnson]

This should work now.

[Louis Bailey]

@milesj Thanks for this, it works great for me now

[Sage Gatzke]

@milesj Is there a way to hint the proper type for the props so that the plugin can manually generate prop types for situations like this? Something like:

type CompProps = { foo: string };
const Comp = forwardRef<HTMLDivElement, CompProps>((props, ref) => { /* … */ });
/* babel-plugin-typescript-to-proptypes ["Comp", "CompProps"] */
Comp.displayName = "Comp";
Comp.defaultProps = { /* … */ };
export default Comp;

So the plugin can skip attempts at finding the Comp component and CompProps type, and just output something like Comp.propTypes = { foo: PropTypes.string };?

I can't seem to get this to work with forwardRef.
Is there a specific line i need to add? I noticed in your tests you named the type RefProps, which didn't seem to work.
/* babel-plugin-typescript-to-proptypes ["Comp", "CompProps"] */ is this needed?
are defaultProps needed?
Is there an example somewhere of how to write forwardRef with typescript to get the proptypes to work?

[Miles Johnson]

You type the generics like this: https://github.com/milesj/babel-plugin-typescript-to-proptypes/blob/master/tests/fixtures/memo-ref-components.tsx#L12

Your types must be in the same file.

[Sage Gatzke]

Thanks, that helped!