javascript - 将 jsx 转换为 tsx？

Question

我有一个定义了 proptypes 的 React 组件库，我正在考虑切换到 Typescript。是否有任何工具可以帮助移植代码？这是一个简单组件的示例 Prop 集:

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