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 malformées provenant d'un serveur, etc. Cependant, Flow semble être l'avenir et avec des concepts comme les génériques, c'est une solution très flexible. L'auto-complétion offerte par Nuclide est également un gros plus pour Flow.

Ma question est maintenant de savoir quelle est la meilleure façon de procéder pour démarrer un nouveau projet. Ou pourrait-il être une bonne solution d'utiliser les deux, 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 écrit:

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é 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 faire le point sur mes expériences avec ce problème.

Comme Flow a beaucoup évolué, j'ai commencé à taper ma base de code avec lui et je n'ai pas ajouté de nouvelles définitions PropType. Jusqu'à présent, je pense que c'est une bonne solution, 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, 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'un ou l'autre sens n'ont pas vraiment décollé. Donc, pour les nouveaux projets, je recommanderais maintenant vraiment d'utiliser Flow sur PropTypes (au cas où vous ne voudriez pas taper deux fois).

À part les deux appartenant au très large champ de vérification de type, il n'y a pas vraiment 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é patché sur React. Il ne peut rien vérifier d'autre que les types d'accessoires passés à un composant donné.

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

Si vous souhaitez simplement 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.

Je crois que le point manqué ici est que Flow est un vérificateur statique tandis 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 saurez pas (si vous n'avez pas suffisamment implémenté le flux dans votre projet par exemple, ou en cas d'objets imbriqués profonds)
• PropTypes les attrapera en aval pendant les tests, donc il ne manquera jamais

Essayez de déclarer le type d'accessoires en utilisant uniquement Flow. Spécifiez un type incorrect, tel qu'un nombre au lieu d'une chaîne. Vous verrez que cela sera signalé dans le code qui utilise le composant dans votre éditeur compatible Flow. 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 entraînera l'échec des tests et sera signalé dans la console du navigateur lorsque l'application sera exécutée.

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