alexxnica / react-javascript-to-typescript-transform

Convert React JavaScript code to TypeScript with proper typing

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"