Typescript support for defining component Interface through React interface

[jonathancopperstone]

I'm playing around with the playground and noticed that if you type your component in this way const MyComponent: React.FC<IProps> = .., react-docgen doesn't pick up the interface in IProps.

I'm curious to know if there's a specific reason for this, and if support for this might be on the roadmap.

Thanks!

[jonathancopperstone]

Any guidance on this please? I'd be happy to take a look and create an MR for this if pointed in the right direction / is it something on your roadmap.

[7rulnik]

@johnnycopperstone I think the problem somewhere in this module https://github.com/reactjs/react-docgen/blob/e05219b08c8b17899be812a521b4985f2b66fae2/src/utils/isStatelessComponent.js

You can debug it with --inspect-brk flag https://nodejs.org/de/docs/guides/debugging-getting-started/

[danez]

The playground parses the code with flow enabled, but not sure if it would work if it gets parsed as typescript.

[josias-r]

The React.FC<Props>is working for me in the latest version 🤔

[danez]

I just checked again and the problem is only happening when the Props are only defined in the React.FC<Props> and not in the props argument itself.

Will look into this soon.

[Dashue]

Coming here from storybook migration guide to 6.0.
https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-53x-to-60x

This is how we define our components so will wait on this to be resolved, rather than re-writing all our components.

Unfortunately I'm not able to help with a fix for the issue.

Thanks in advance to whoever does :)

[Winner95]

I hope it might help as temporary workaround - I made a custom handler for parsing React.FC < Props >, which points at existing Props at UI-component.