将jsx转换为tsx？

Question

我有一个定义了proptypes的React组件库，正在考虑切换到Typescript。有什么工具可以帮助移植代码吗？下面是一个简单组件的示例道具集：

  static propTypes = {
    active: PropTypes.bool,
    children: PropTypes.node,
    disabled: PropTypes.bool,
    icon: Icon.propTypes.kind,
    tabIndex: PropTypes.number
  };

我正在想象一种工具，可以将其转换为以下内容：

interface IButtonProps {
    active: boolean,
    children: node,
    disabled: boolean,
    icon: Icon,
    tabIndex: number
}

写起来并不难，但如果它已经存在就更好了。

Answer 1

您可以使用react-javascript-to-typescript-transform包自动将React JSX转换为Typescript TSX。

代码可以通过CLI进行转换，例如

react-js-to-ts reactFile.js

以下示例取自项目网站。标准的react组件，例如

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 });
}
}

将转换为以下typescript文件：

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 });
}
}

Answer 2

是否有任何工具可以帮助移植代码

不是的。或者创建一个(并链接回来)，或者只做手动操作，或者只使用any快速入门