Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Typescript support for defining component Interface through React interface

See original GitHub issue

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.

Screenshot 2019-08-16 at 13 22 06

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

Thanks!

Issue Analytics

State:
Created 4 years ago
Reactions:155
Comments:8

Top GitHub Comments

8reactions

Dashuecommented, Mar 11, 2020

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 😃

4reactions

Winner95commented, Mar 23, 2020

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.

Top Results From Across the Web

Use Interface Props in Functional Components ... - Pluralsight

This guide described how to use the TypeScript interface to define strongly typed props in a function component. They help define the contract ......

How to Overload TypeScript React Component Interfaces by ...

This article explains how to create correct, intuitive APIs for React components in TypeScript by using prop values to overload React component interfaces....

React -TypeScript — How to add interface with functional ...

In this article, I'm going to discuss how to add interface with functional component typed props beginner guide :) Typescript, PropType , React...

How to Build a React Component with TypeScript Interfaces

This illustrates the power of using TypeScript with tools such as React since they can help guide the development process and document the...

Best Practices for Using TypeScript and React - OneSignal

TypeScript and React are excellent in combination for apps. Sprinkle in React's expressive component model with strong typing, and you get ...