web-dev-qa-db-fra.com

React PropTypes vs. Flow

PropTypes et Flow couvrent des choses similaires mais utilisent des approches différentes. Les PropTypes peuvent vous donner des avertissements pendant l'exécution, ce qui peut être utile pour trouver rapidement des réponses mal formées provenant d'un serveur, etc. Cependant, Flow semble être l'avenir et avec des concepts tels que les génériques, une solution très flexible. De plus, l'auto-complétion proposée par Nuclide est un avantage considérable pour Flow.

Ma question est la suivante: quelle est la meilleure voie à suivre lors du démarrage d’un nouveau projet? Ou pourrait-il être une bonne solution d'utiliser à la fois Flow et PropTypes? Le problème avec l'utilisation des deux est que vous écrivez beaucoup de code en double. Voici un exemple d'application de lecteur de musique que j'ai écrite:

export const PlaylistPropType = PropTypes.shape({
    next: ItemPropTypes,
    current: ItemPropTypes,
    history: PropTypes.arrayOf(ItemPropTypes).isRequired
});

export type Playlist = {
    next: Item,
    current: Item,
    history: Array<Item>
};

Les deux définitions contiennent essentiellement les mêmes informations et lorsque le type de données est modifié, les deux définitions doivent être mises à jour.

J'ai trouvé ceci plugin babel pour convertir les déclarations de type en PropTypes, ce qui pourrait être une solution.

reactjsflowtypereact-proptypes
93
danielbuechele

Un an après avoir posé cette question, je voulais faire le point sur mon expérience de ce problème.

Comme Flow a beaucoup évolué, j'ai commencé à taper ma base de code avec elle et je n'ai ajouté aucune nouvelle définition PropType. Jusqu'ici, je pense que c'est un bon chemin à parcourir car, comme mentionné ci-dessus, cela vous permet non seulement de taper des accessoires, mais également d'autres parties de votre code. Cela est très pratique, par exemple lorsque vous avez une copie de vos accessoires dans l'état, que l'utilisateur peut modifier. En outre, l'auto-complétion dans les IDE est un gain impressionnant.

Les convertisseurs automatiques dans un sens ou dans l'autre n'ont pas vraiment décollé. Donc, pour les nouveaux projets, je recommanderais maintenant vraiment d’utiliser Flow over PropTypes (au cas où vous ne voudriez pas taper deux fois).

75
danielbuechele

Hormis les deux appartenant au très vaste domaine de la vérification de type, il n’ya pas vraiment beaucoup de similitude entre les deux.

Flow est un outil d'analyse statique qui utilise un sur-ensemble du langage, vous permettant d'ajouter des annotations de type à tout votre code et d'attraper une classe entière de bogues au moment de la compilation.

PropTypes est un vérificateur de type de base qui a été appliqué à React. Il ne peut vérifier que les types d'accessoires transmis à un composant donné.

Si vous souhaitez une vérification de typage plus souple pour l'ensemble de votre projet, Flow/TypeScript sont des choix appropriés. Tant que vous ne passez que des types annotés à des composants, vous n'avez pas besoin de PropTypes.

Si vous voulez juste vérifier les types d'accessoires, ne compliquez pas trop le reste de votre base de code et optez pour l'option la plus simple.

32
Dan Prince

Je crois que le point manqué ici est que Flow est un vérificateur statique while PropTypes est un vérificateur d'exécution, ce qui signifie

  • Flow peut intercepter des erreurs en amont lors du codage: il peut théoriquement passer à côté de certaines erreurs que vous ne saurez pas (si vous n'avez pas implémenté suffisamment le flux dans votre projet, par exemple, ou dans le cas d'objets imbriqués profonds)
  • PropTypes les attrapera en aval lors des tests, pour ne pas les manquer
24
Rewieer

Essayez de déclarer le type d'accessoire en utilisant uniquement Flow. Spécifiez un type incorrect, tel que nombre au lieu de chaîne. Vous verrez que cela sera signalé dans le code qui utilise le composant dans votre éditeur Flow-aware. Toutefois, cela ne fera échouer aucun test et votre application fonctionnera toujours.

Maintenant, ajoutez l’utilisation de React PropTypes avec un type incorrect. Cela provoquera l’échec des tests et leur affichage dans la console du navigateur lors de l’exécution de l’application.

Sur cette base, il semble que même si Flow est utilisé, les PropTypes devraient également être spécifiés.

14
Mark Volkmann