Properties not working with TypeScript

[nhajratw]

It seems that passing properties doesn't work with Typescript. Does it only work if you're using the PropTypes package?

interface MyProps {
    data: string
}

class App extends React.Component<MyProps, any> {
    render() {
        return (
            <div className="App">
                    <p>
                        - Data: [{this.props.data}]
                    </p>
            </div>
        );
    }
}

export default App;

[terrabythia]

Yes, if you look at the source code, it specifically checks which properties are added to MyReactComponent.propTypes object and watches those for changes. You will have to include the PropTypes package for this.

You could try to just set MyReactComponent.propTypes like this without importing the PropTypes package, since the script only looks at the keys of that property of your react component:

MyElement.propTypes = {
  propOne: 'propOne',
  propTwo: 'propTwo',
}

[justinbmeyer]

Thanks for the feedback @terrabythia

[justinbmeyer]

We could add a note that you still need propTypes, even with TypeScript

[janebitovi]

related to #5 - adding the null check suggested there is problematic too, propTypes is required

[christopherjbaker]

We will very shortly add a note to the readme and warning to the code about propTypes. We are also going to remove the requirement of propTypes, but we need to research if there's a way to remove it entirely, or if we just need to provide an alternate way of providing the information we need.

[janebitovi]

#50

[konsalex]

Is there any plan to include react-docgen-typescript in the future, to avoid restriction to propTypes? I think this is what Storybook also does for inferring the props nowadays

[christopherjbaker]

We are working on the next version that has a much simpler way to provide that information. using react-docgen-typescript would require integrating it with the build step instead of just run time so it might complicate things, but we could certainly look into it in the future.