PropTypes dans une application TypeScript React

Est-ce que l'utilisation a du React.PropTypessens dans une application TypeScript React ou est-ce juste un cas de «ceinture et bretelles»?

Puisque la classe de composant est déclarée avec un Propsparamètre de type:

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

y a-t-il un réel avantage à ajouter

static propTypes {
    myProp: React.PropTypes.string
}

à la définition de classe?

Il n'y a généralement pas beaucoup de valeur à maintenir à la fois vos accessoires de composant en tant que types TypeScript et React.PropTypes en même temps.

Voici quelques cas où il est utile de le faire:

• Publication d'un package tel qu'une bibliothèque de composants qui sera utilisée par JavaScript brut.
• Accepter et transmettre des entrées externes telles que les résultats d'un appel d'API.
• Utiliser des données d'une bibliothèque qui peuvent ne pas avoir de typages adéquats ou précis, le cas échéant.

Donc, généralement, il s'agit de savoir dans quelle mesure vous pouvez faire confiance à la validation de la compilation.

Les versions plus récentes de TypeScript peuvent désormais déduire des types basés sur votre React.PropTypes( PropTypes.InferProps), mais les types résultants peuvent être difficiles à utiliser ou à consulter ailleurs dans votre code.

Typescript et PropTypes ont des objectifs différents. Typescript valide les types au moment de la compilation , tandis que les PropTypes sont vérifiés à l' exécution .

Typescript est utile lorsque vous écrivez du code: il vous avertira si vous passez un argument du mauvais type à vos composants React, vous donnera la saisie semi-automatique pour les appels de fonction, etc.

Les propTypes sont utiles lorsque vous testez la façon dont les composants interagissent avec des données externes, par exemple lorsque vous chargez JSON à partir d'une API. PropTypes vous aidera à déboguer (en mode Développement de React) pourquoi votre composant échoue en imprimant des messages utiles comme:

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

Même s'il peut sembler que Typescript et PropTypes font la même chose, ils ne se chevauchent pas du tout. Mais il est possible de générer automatiquement des PropTypes à partir de Typescript afin de ne pas avoir à spécifier deux fois les types, voir par exemple:

• 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

Je suppose que dans certaines situations désordonnées où le type d'accessoires ne peut pas être déduit au moment de la compilation, il serait utile de voir tous les avertissements générés par l'utilisation propTypesau moment de l'exécution.

Une telle situation serait lors du traitement de données à partir d'une source externe pour laquelle les définitions de type ne sont pas disponibles, comme une API externe indépendante de votre volonté. Pour les API internes, je pense que cela vaut la peine d'écrire (ou mieux, de générer) des définitions de type, si elles ne sont pas déjà disponibles.

A part ça, je ne vois vraiment aucun avantage (c'est pourquoi je ne l'ai jamais utilisé personnellement).