Конвертировать JSX в TSX?

Question

Конвертировать JSX в TSX?

3

У меня есть библиотека компонентов React с определенными proptypes, и я рассматриваю возможность перехода на Typcript. Есть ли какой-нибудь инструмент, помогающий переносить код? Вот пример набора реквизитов для простого компонента:

  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
}

Не слишком сложно писать, но было бы неплохо, если бы оно уже существовало.

Jake Pearson 29 май 2016, в 06:27

Источник

1

Как насчет простой замены регулярных выражений в выбранной вами IDE?
Fez Vrasta 29 май 2016, в 10:42
0

Помог ли мой ответ?
Ben Smith 17 март 2019, в 16:52

Теги:

javascript

reactjs

typescript

transformation

porting

2 ответа

Ещё вопросы

Как насчет простой замены регулярных выражений в выбранной вами IDE?

Ben Smith · Answer 1 · 2018-02-03T02-17-00.000Z

Вы можете использовать пакет response-javascript-to-typescript-transform для автоматического преобразования/переноса React JSX в TypScript TSX.

Код можно преобразовать через CLI, например

react-js-to-ts reactFile.js

Следующий пример взят с веб-сайта проектов. Стандартный компонент реакции, например

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

Будет преобразован в следующий файл машинописного текста:

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

basarat · Answer 2 · 2016-05-30T01-31-00.000Z

Есть ли какой-либо инструмент, который поможет порту кода

Неа. Либо создайте один (и ссылку назад), либо просто выполните ручную работу или просто используйте any чтобы быстро начать