PropTypes в приложении TypeScript React

Имеет ли React.PropTypesсмысл использование в приложении TypeScript React или это просто «пояс и подтяжки»?

Поскольку класс компонента объявлен с Propsпараметром типа:

interface Props {
    // ...
}
export class MyComponent extends React.Component<Props, any> { ... }

есть ли реальная польза от добавления

static propTypes {
    myProp: React.PropTypes.string
}

к определению класса?

Обычно не имеет большого значения поддерживать оба свойства компонентов как типы TypeScript и React.PropTypesодновременно.

Вот несколько случаев, когда это полезно:

• Публикация пакета, например библиотеки компонентов, который будет использоваться обычным JavaScript.
• Принятие и передача внешнего ввода, например результатов вызова API.
• Использование данных из библиотеки, которая может не иметь адекватной или точной типизации, если таковая имеется.

Итак, обычно вопрос в том, насколько вы можете доверять своей проверке времени компиляции.

Новые версии TypeScript теперь могут определять типы на основе вашего React.PropTypes( PropTypes.InferProps), но полученные типы могут быть трудными для использования или ссылки в другом месте вашего кода.

Typescript и PropTypes служат разным целям. Typescript проверяет типы во время компиляции , тогда как PropTypes проверяются во время выполнения .

TypeScript полезен при написании кода: он предупредит вас, если вы передадите аргумент неправильного типа вашим компонентам React, даст вам автозаполнение для вызовов функций и т. Д.

PropTypes полезны, когда вы тестируете, как компоненты взаимодействуют с внешними данными, например, когда вы загружаете JSON из API. PropTypes поможет вам отладить (в режиме разработки React), почему ваш компонент не работает, печатая полезные сообщения, такие как:

Warning: Failed prop type: Invalid prop `id` of type `number` supplied to `Table`, expected `string`

Хотя может показаться, что Typescript и PropTypes делают одно и то же, на самом деле они совсем не перекрываются. Но можно автоматически сгенерировать PropTypes из Typescript, чтобы вам не приходилось указывать типы дважды, см., Например:

• https://github.com/milesj/babel-plugin-typescript-to-proptypes
• https://github.com/grncdr/ts-react-loader#what-it-does
• https://github.com/gcanti/prop-types-ts

Я предполагаю, что в некоторых беспорядочных ситуациях, когда тип свойств не может быть определен во время компиляции, было бы полезно увидеть любые предупреждения, сгенерированные при использовании propTypesво время выполнения.

Одна из таких ситуаций может возникнуть при обработке данных из внешнего источника, для которого определения типов недоступны, например внешнего API, не зависящего от вас. Для внутренних API, я думаю, стоит потратить усилия на написание (или, лучше сказать, генерацию) определений типов, если они еще не доступны.

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