Transforms React code written in JavaScript to TypeScript.
🖥 Download the VSCode Extension
PropTypes
to React.Component
generic type and removes PropTypesReact.Component
based on initial state and setState()
calls in the componentReact.Component<P, S>
into declared typesPropTypes
property to TypeScript and uses propTypes to generate function type declarationinput
class MyComponent extends React.Component { static propTypes = { 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
type MyComponentProps = { prop1: string; prop2?: number; }; type MyComponentState = { foo: number; bar: string; baz: number; }; class MyComponent extends React.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
.
Pass -w
to npm test
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"
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4