Transforms React code written in JavaScript to TypeScript.

🖥 Download the VSCode Extension

• Proxies PropTypes to React.Component generic type and removes PropTypes
• Provides state typing for React.Component based on initial state and setState() calls in the component
• Hoist large interfaces for props and state out of React.Component<P, S> into declared types
• Convert functional components with PropTypes property to TypeScript and uses propTypes to generate function type declaration

input

classMyComponentextendsReact.Component{staticpropTypes={prop1: React.PropTypes.string.isRequired,prop2: React.PropTypes.number,};constructor(){super();this.state={foo: 1,bar: 'str'};}render(){return(<div>{this.state.foo}, {this.state.bar}, {this.state.baz}</div>);}onClick(){this.setState({baz: 3});}}

output

typeMyComponentProps={prop1: string;prop2?: number;};typeMyComponentState={foo: number;bar: string;baz: number;};classMyComponentextendsReact.Component<MyComponentProps,MyComponentState>{constructor(){super();this.state={foo: 1,bar: 'str'};}render(){return(<div>{this.state.foo}, {this.state.bar}, {this.state.baz}</div>);}onClick(){this.setState({baz: 3});}}

npm install -g react-js-to-ts 

react-js-to-ts my-react-js-file.js 

details Download from VSCode Marketplace

Tests are organized in test folder. For each transform there is a folder that contains folders for each test case. Each test case has input.tsx and output.tsx.

npm test 

Pass -w to npm test

npm test -- -w 

Pass -t with transform name and case name space separated to npm test

npm test -- -t "react-js-make-props-and-state-transform propless-stateless"