React Javascript To Typescript Transform Save Abandoned

Convert React JavaScript code to TypeScript with proper typing

Project README

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"
Open Source Agenda is not affiliated with "React Javascript To Typescript Transform" Project. README Source: lyft/react-javascript-to-typescript-transform
Stars
1,575
Open Issues
0
Last Commit
3 years ago
License
Tags

Open Source Agenda Badge

Open Source Agenda Rating