Typescript реагирует / ведет к редуксу - как перевести с js?

Question

Я перевожу с этого руководства .Вот код, который я перевел до сих пор (внутри Todo.tsx):

import * as React from 'react'
import * as PropTypes from 'react';

interface ITodo
{
  onClick : ()=>void,
  completed : boolean,
  text : string
}
​
const Todo = ({ onClick, completed, text } : ITodo) => (
  <li
    onClick={onClick}
    style={ {
      textDecoration: completed ? 'line-through' : 'none'
    }}
  >
    {text}
  </li>
)

Однако я борюсь со второй частью (в js:)

Todo.propTypes = {
  onClick: PropTypes.func.isRequired,
  completed: PropTypes.bool.isRequired,
  text: PropTypes.string.isRequired
}

Так какPropTypes не содержит ни одного из bool или func или string членов.

Answer 1

import * as React from 'react'
import * as PropTypes from 'react';

Эти две строки странные, и я не уверен, что они работают.React и PropTypes являются экспортом по умолчанию для их собственного пакета.Поэтому, если вы используете React v15.5 и выше, оно должно быть:

import React from 'react';
import PropTypes from 'prop-types';

, если вы используете более низкую версию React, также может выполнить:

import React, { PropTypes } from 'react';

По вашему TypeScript вопросу:

Вы можете удалить объявление propTypes, так как вы уже набираете свой компонент с помощью TypeScript, используя interface, который вы объявили.Следовательно, propTypes становятся бесполезными.

Вы все еще можете использовать defaultProps, если один из ваших реквизитов не является обязательным

Answer 2

Во-первых, практически нет причин использовать PropTypes с TypeScript.

Во-вторых, вы можете рассмотреть возможность включения allowSyntheticDefaultImports или более позднего добавления, имя которого ускользает от меня до вашего tsconfig.json, чтобы выможно избежать необходимости import * as.

В-третьих, вы должны определить свой SFC как React.SFC, а не утверждать ожидаемые реквизиты в аргументе.Следующее:

const Todo: React.SFC<ITodo> = (props) => ();

Конечно, вы можете деструктурировать и использовать JSX, как вы это делали.

Answer 3

Заменить import * as PropTypes from 'react'; на import * as PropTypes from 'prop-types';