I have a library of React components with defined proptypes and am considering switching to Typescript. Is there any tool that will help port the code? Here is an example set of props for a simple component:

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

I'm imagining a tool that would convert this to something like:

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

Not too hard to write, but it would be nice if it already existed.

I have a library of React components with defined proptypes and am considering switching to Typescript. Is there any tool that will help port the code? Here is an example set of props for a simple component:

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

I'm imagining a tool that would convert this to something like:

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

Not too hard to write, but it would be nice if it already existed.

• javascript
• reactjs
• typescript
• transformation
• porting

• 1 What about a simple regex replace in your IDE of choice? – Fez Vrasta Commented May 29, 2016 at 10:42
• Did my answer help? – Ben Smith Commented Mar 17, 2019 at 16:52

2 Answers 2

You could use the react-javascript-to-typescript-transform package to automatically convert/port React JSX to Typescript TSX.

Code can be transformed via the CLI e.g.

react-js-to-ts reactFile.js

The following example is taken from the projects website. A standard react component e.g.

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

Would get converted to the following typescript file:

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

Is there any tool that will help port the code

Nope. Either create one (and link back) or just do the manual work or just use any to get a quick start