React JavaScript to TypeScript Transform

Transforms React code written in JavaScript to TypeScript.

🖥 Download the VSCode Extension

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

details 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"

Using Visual Studio Code to debug tests

To run all test run "Test All" from debug panel.

Run a single test

Edit .vscode/launch.json to add the same argument you pass to jest for your specific test.

Breakpoints work with test 🎉

Throw a breakpoint anywhere in code to stop the test there and inspect issue.