React JavaScript to TypeScript Transform

迁移 react + proptypes 代码至 react + typescript 的工具。
优先考虑转换后代码的兼容性，减少手动修正的代码量，以实现快速迁移。

栗子

input

class MyComponent extends React.Component {
    static propTypes = {
        alice: PropTypes.string.isRequired,
        ate: PropTypes.number,
    };
    constructor(props) {
        super(props);
        this.ref = React.createRef();
        this.state = { allen: '' };
    }

    onClick() {
        this.setState({ drink: 3 });
    }

    render() {
        const { cake } = this.props;
        const { milk } = this.state;
        return <div ref={this.ref}>HOME</div>;
    }
}

output

interface IMyComponentProps extends React.HTMLAttributes<Element> {
    alice: string;
    ate?: number;
    cake?: any;
}
type MyComponentState = {
    allen?: string;
    drink?: number;
    milk?: any;
};
class MyComponent extends React.Component<IMyComponentProps, MyComponentState> {
    ref: any;
    constructor(props) {
        super(props);
        this.ref = React.createRef();
        this.state = { allen: '' };
    }
    onClick() {
        this.setState({ drink: 3 });
    }
    render() {
        const { cake } = this.props;
        const { milk } = this.state;
        return <div ref={this.ref}>HOME</div>;
    }
}

使用

安装

npm install -g react-proptypes-to-typescript

命令

react-proptypes-to-typescript "./src/**/*.js"

or

react-proptypes-to-typescript "./src/**/*.js" --remove-original-files

广告位

迅速搭建React源码测试环境