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, я вважаю, що варто докласти зусиль, щоб написати (або краще, створити) визначення типів, якщо вони ще не доступні.

Крім цього, я не бачу ніякої користі (чому я ніколи не використовував її особисто).