PropTypes dans une application TypeScript React

Question

L'utilisation de React.PropTypes un sens dans une application TypeScript React ou s'agit-il simplement d'une "ceinture et bretelles"?

Étant donné que la classe de composants est déclarée avec un paramètre de type Props :

 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?

Answer 1

Tapuscrit et PropTypes servent à des fins différentes. Tapuscrit valide au moment de la compilation, alors que PropTypes sont vérifiées au runtime.

Tapuscrit est utile lorsque vous écrivez du code: il vous avertira si vous passez un argument de type incorrect pour votre Réagissent composants, de vous donner la saisie semi-automatique pour les appels de fonction, etc.

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 va vous aider à déboguer (quand à Réagir du mode de Développement) pourquoi votre composant défaillant par l'impression des messages utiles comme:

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

Même si il peut sembler comme Tapuscrit et PropTypes faire la même chose, en fait elles ne se chevauchent à tous. Mais il est possible de générer automatiquement PropTypes de la Machine de sorte que vous n'avez pas à spécifier les types de deux fois, 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

Answer 2

Si vous êtes de l'écriture de composants à être consommés par les non-Tapuscrit de projets, comme une bibliothèque de composants, ces projets ne seront pas en mesure de bénéficier de la PropTypes le type de validation.

Si, toutefois, vous êtes de ne pas faire tout ce qui sera consommée par un non-Tapuscrit de projet, il est inutile. Cela est particulièrement vrai maintenant que Tapuscrit 2.4 soutiendra JSX enfant type de vérification (https://github.com/Microsoft/TypeScript/issues/13618).

Ne gardez à l'esprit que, bien qu' context est fourni à titre d' any, contextTypes est encore nécessaire afin d'avoir ces valeurs transmises à votre composant.

Je suis curieux de voir si il y a un outil qui peut générer propTypes automatiquement lors de la compilation du chier d'enregistrement des interfaces. Qui serait assez cool.

Answer 3

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

En dehors de cela, je ne vois vraiment aucun avantage (c'est pourquoi je ne l'ai jamais utilisé personnellement).