Skip to content

mohsen1/react-javascript-to-typescript-transform

 
 

Repository files navigation

React JavaScript to TypeScript Transform

Build Status

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.

About

Convert React JavaScript code to TypeScript with proper typing

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 95.3%
  • JavaScript 4.7%