React JavaScript to TypeScript Transform

Transforms React code written in JavaScript to TypeScript.

Features:

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

Example

input

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 })
  }
}

Usage

CLI

npm install -g react-js-to-ts

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

VSCode plugin

Download from VSCode Marketplace

Development

Tests

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

Watch mode

Pass -w to npm test

npm test -- -w

Only a single test case

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"

marcodejongh/react-javascript-to-typescript-transform