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

122

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

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

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

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

static propTypes {
    myProp: React.PropTypes.string
}

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

reactjs typescript react-proptypes

— Ральф
источник

Ответы:

104

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

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

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

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

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

— Джоэл Дэй
источник

Не могли бы вы объяснить первое утверждение?

— vehsakul

@vehsakul Извините, за пояснение, если вы пишете пакет, который будет установлен разработчиками, не использующими TypeScript, им по-прежнему нужны PropTypes, чтобы получать ошибки во время выполнения. Если ваш проект предназначен только для вас / других проектов TypeScript, интерфейсов TypeScript для ваших свойств будет достаточно, потому что проект просто не будет построен.

— Joel Day

Это POC , который добавляет PropTypes из машинопись интерфейсов на уровне WebPack github.com/grncdr/ts-react-loader#what-it-does

— borN_free

Мне нужен oneOfType - optionalUnion: PropTypes.oneOfType ([PropTypes.string, PropTypes.number, PropTypes.instanceOf (Message)]), - typescript имеет типы объединения, но они не дают мне того же самого

— Mz A

Я опубликовал библиотеку, которая делает то же самое : github.com/joelday/ts-proptypes-transformer. Он реализован как преобразование компилятора TypeScript и выдает точные propTypes для глубоких обобщений, объединений и т. Д. Есть некоторые шероховатости, поэтому любые взносы были бы замечательными.

— Joel Day

141

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, чтобы вам не приходилось указывать типы дважды, см., Например:

— afonsoduarte
источник

Типы propTypes и Typescript легко рассинхронизируются? Кто-нибудь имел опыт обслуживания, чтобы рассказать нам?

— Леонардо

Это правильный ответ! PropTypes (время выполнения) не то же самое, что проверка статического типа (время компиляции). Следовательно, использование обоих не является «бессмысленным упражнением».

— Ханс

Вот хорошее объяснение того, как статические типы могут быть выведены из PropTypes: dev.to/busypeoples/…

— hans

Время выполнения и время компиляции не имеет смысла, если у вас есть vue cli с горячей перезагрузкой и eslint. Что генерирует ошибки при сохранении.

— Юлия

@Julia, горячая перезагрузка не имеет ничего общего с runtime. Даже с горячей перезагрузкой вы не поймете, что на самом деле

— вернет

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

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

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

— Том Фенек
источник

Проверка PropTypes также имеет смысл для проверки структур данных, загруженных динамически (поступающих с сервера через AJAX). PropTypes - это проверка во время выполнения, поэтому она действительно может помочь в отладке. При возникновении проблем будут выводиться четкие и понятные сообщения.

— e1v