React PropTypes vs. Flow

PropTypes et Flow couvrent des choses similaires mais utilisent des approches différentes. PropTypes peut 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, c’est une solution très flexible. L’auto-complétion offerte par Nuclide est également un gros avantage pour Flow.

Ma question est maintenant de savoir quelle est la meilleure façon de procéder lors du démarrage d’un nouveau projet. Ou pourrait-il être une bonne solution pour 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’une 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 }; 

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é ce plugin babel pour convertir les déclarations de type en PropTypes, ce qui pourrait être une solution.

Un an après avoir posé cette question, je voulais donner une mise à jour sur la façon dont mes expériences avec ce problème.

À mesure que le stream évoluait beaucoup, j’ai commencé à taper mon code avec celui-ci sans append de nouvelles définitions PropType. Jusqu’à présent, je pense que c’est une bonne façon de faire, car comme mentionné ci-dessus, cela vous permet non seulement de taper des accessoires, mais aussi d’autres parties de votre code. Cela s’avère très pratique par exemple lorsque vous avez une copie de vos accessoires en l’état, qui peut être modifiée par l’utilisateur. En outre, l’auto-complétion dans les IDE est un gain impressionnant.

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

Mis à part les deux appartenant au très large domaine de la vérification de type, il n’ya pas vraiment de similitude entre les deux.

Flow est un outil d’parsing statique qui utilise un sur-ensemble du langage, vous permettant d’append des annotations de type à tout votre code et d’attraper toute une classe de bogues au moment de la compilation.

PropTypes est un vérificateur de type de base qui a été corrigé sur React. Il ne peut pas vérifier autre chose que les types des accessoires transmis à un composant donné.

Si vous souhaitez une vérification plus flexible de votre projet, alors Flow / TypeScript est un choix approprié. Tant que vous ne transmettez que des types annotés aux composants, vous n’aurez pas besoin de PropTypes.

Si vous voulez simplement vérifier les types de prop, ne compliquez pas trop le rest de votre base de code et optez pour l’option la plus simple.

Je crois que le point manquant ici est que Flow est un vérificateur statique alors que PropTypes est un vérificateur d’exécution , ce qui signifie

  • Flow peut intercepter les erreurs en amont lors du codage: il peut théoriquement manquer certaines erreurs que vous ne connaissez pas (si vous n’avez pas implémenté suffisamment de stream dans votre projet, par exemple, ou en cas d’objects nesteds)
  • Les PropTypes les attraperont en aval pendant le test, donc ils ne manqueront jamais

Essayez de déclarer le type d’accessoires en utilisant uniquement Flow. Spécifiez un type incorrect, tel que nombre au lieu de chaîne. Vous verrez que cela sera marqué dans le code qui utilise le composant dans votre éditeur Flow-aware. Cependant, cela n’entraînera aucun échec des tests et votre application fonctionnera toujours.

Ajoutez maintenant l’utilisation de React PropTypes avec un type incorrect. Cela provoquera l’échec des tests et sera signalé dans la console du navigateur lorsque l’application est exécutée.

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