javascript - Konvertera jsx till tsx?

Jag har ett bibliotek med React-komponenter med definierade proptypes och överväger att byta till Typescript. Finns det något verktyg som kan hjälpa till att konvertera koden? Här är ett exempel på props för en enkel komponent:

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

Jag föreställer mig ett verktyg som skulle omvandla detta till något liknande:

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

Inte för svårt att skriva, men det skulle vara trevligt om det redan fanns.

Svar #1

Du kan använda paketet react-javascript-to-typescript-transform för att automatiskt konvertera/överföra React JSX till TypeScript TSX.

Kod kan transformeras via CLI t.ex.

react-js-to-ts reactFile.js

Följande exempel är taget från projektets webbplats. En standard React-komponent t.ex.

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

Skulle bli konverterad till följande TypeScript-fil:

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

Svar #2

Finns det något verktyg som kan hjälpa till att porta koden

Nej. Skapa antingen en (och länka tillbaka) eller gör bara arbetet manuellt eller använd bara any för att snabbt komma igång 🌹

Relaterade artiklar