Extract proptypes in Typescript (interfaces)

[SimpleCookie]

How can I extract the proptypes (the interface) of a component in Typescript? I Know I can access the component and get the props easily, but I want to get the types, so that I can easily generate a nice show-case for my lib components.

[ferdaber]

Are you asking for the .propTypes static property of a component, or just getting the type of the props for a component?

To get the type of what a component expects to be passed in (i.e. "external" or "apparent" props), you can use:

import SomeComponent from 'external-library'

type InternalProps = React.ComponentProps<typeof SomeComponent>
type ApparentProps = JSX.LibraryManagedAttributes<typeof SomeComponent, InternalProps>

[swyxio]

seen this? https://github.com/sw-yx/react-typescript-cheatsheet#the-types-i-need-werent-exported

also check this out: https://www.docz.site/documentation/components-api#propstable

i demo it here https://twitter.com/swyx/status/1086153419927089153

[SimpleCookie]

Are you asking for the .propTypes static property of a component, or just getting the type of the props for a component?

To get the type of what a component expects to be passed in (i.e. "external" or "apparent" props), you can use:

import SomeComponent from 'external-library'

type InternalProps = React.ComponentProps<typeof SomeComponent>
type ApparentProps = JSX.LibraryManagedAttributes<typeof SomeComponent, InternalProps>

I was able to retrieve the props passed down to a component, but I wanted to get the whole interface, even the props which aren't passed down. But I'll look into the things @sw-yx mentioned this week and see if it can solve my problem. I'll also look into the code example you gave me, thank you!