React Pattern: PropTypes centralisés

Évitez de vous répéter en centralisant les PropTypes

Il existe trois méthodes courantes pour gérer les types dans React: PropTypes, TypeScript et Flow. Cet article concerne les PropTypes, qui sont actuellement les plus populaires.

? Pour appliquer des types dans React, j'utilise généralement ... # react

RT est apprécié

- Cory House (@housecor) 23 septembre 2017

Puisque les PropTypes fournissent des avertissements de type au moment de l'exécution, il est utile d'être aussi précis que possible.

  • Le composant accepte un objet? Déclarez la forme de l'objet.
  • Prop n'accepte qu'une liste spécifique de valeurs? Utilisez oneOf.
  • Le tableau doit contenir des nombres? Utilisez arrayOf.
  • Vous pouvez même déclarer vos propres types. AirBnB propose de nombreux PropTypes supplémentaires.

Voici un exemple PropType:

UserDetails.propTypes = { user: PropTypes.shape({ id: PropTypes.number.isRequired, firstName: PropTypes.string.isRequired, lastName: PropTypes.string.isRequired, role: PropTypes.oneOf(['user','admin']) };

Dans de vraies applications avec de gros objets, cela conduit rapidement à beaucoup de code. C'est un problème, car dans React, vous passerez souvent le même objet à plusieurs composants . La répétition de ces détails dans plusieurs fichiers de composants rompt le principe DRY (ne vous répétez pas). Se répéter crée un problème de maintenance.

La solution? Centralisez vos PropTypes .

Voici comment centraliser les PropTypes

Je préfère centraliser les PropTypes dans /types/index.js.

J'utilise des importations nommées sur la ligne 2 pour raccourcir les déclarations. ?

Et voici comment j'utilise le PropType que j'ai déclaré ci-dessus:

// types/index.js import { shape, number, string, oneOf } from 'prop-types'; export const userType = shape({ id: number, firstName: string.isRequired, lastName: string.isRequired, company: string, role: oneOf(['user', 'author']), address: shape({ id: number.isRequired, street: string.isRequired, street2: string, city: string.isRequired, state: string.isRequired, postal: number.isRequired }); });

J'utilise une importation nommée pour obtenir une référence à la déclaration PropType exportée à la ligne 2. Et je la mets à utiliser à la ligne 13.

Avantages :

  1. Le PropType centralisé simplifie radicalement la déclaration PropType du composant. La ligne 13 fait simplement référence au PropType centralisé, il est donc facile à lire.
  2. Le type centralisé déclare uniquement la forme, vous pouvez donc toujours marquer l'accessoire selon vos besoins.
  3. Plus de copier / coller. Si la forme de l'objet change ultérieurement, vous disposez d'un seul emplacement pour la mise à jour. ?

Voici un exemple de travail sur CodeSandbox.

Crédit supplémentaire: générez vos PropTypes

Enfin, envisagez d'écrire du code personnalisé pour générer vos déclarations PropType à partir de votre code côté serveur. Par exemple, si votre API est écrite à l'aide d'un langage fortement typé comme C # ou Java, envisagez de générer vos déclarations PropType dans le cadre de votre processus de création d'API côté serveur en lisant la forme de vos classes côté serveur. De cette façon, vous n'avez pas à vous soucier de la synchronisation de vos PropTypes côté client et de votre code API côté serveur. ?

Remarque : si vous connaissez un projet qui fait cela pour toutes les langues côté serveur, veuillez répondre dans les commentaires et j'ajouterai un lien ici.

Edit : vous pouvez convertir JSON en PropTypes à l'aide de transform.now.sh. ?

Sommaire

  1. Déclarez vos PropTypes aussi explicitement que possible, afin que vous sachiez quand vous avez fait une erreur.
  2. Centralisez vos PropTypes pour éviter de vous répéter.
  3. Si vous travaillez dans un langage fortement typé sur le serveur, envisagez de générer vos PropTypes en lisant votre code côté serveur. Cela garantit que vos PropTypes correspondent à vos types côté serveur.

Vous en voulez plus sur React? ⚛️

J'ai écrit plusieurs cours React et JavaScript sur Pluralsight (essai gratuit).

Cory House est l'auteur de plusieurs cours sur JavaScript, React, Clean Code, .NET et plus sur Pluralsight. Il est consultant principal chez reactjsconsulting.com, architecte logiciel chez VinSolutions, MVP Microsoft, et forme des développeurs de logiciels à l'échelle internationale sur les pratiques logicielles telles que le développement frontal et le codage propre. Cory tweete sur JavaScript et le développement frontal sur Twitter en tant que @housecor.