Comment utiliser PropTypes dans React

Les PropTypes sont une bonne défense de première ligne lorsqu’il s’agit de déboguer vos apps. Mais avant d’entrer dans le détail des PropTypes, nous devons comprendre le concept de props.

Lesprops sont les propriétés en lecture seule qui sont partagées entre les composants pour donner au flux unidirectionnel de React une touche dynamique. Ils sont principalement partagés du composant parent au composant enfant, mais l’inverse est également possible (bien que non recommandé).

Dans ce blog, nous allons voir comment valider ou vérifier les props que l’on passe pour éviter un débogage complexe par la suite.

Que sont les PropTypes ?

Les PropTypes sont simplement un mécanisme qui garantit que la valeur transmise est du bon type de données. Cela permet de s’assurer que nous ne recevons pas une erreur à la toute fin de notre application par la console, ce qui pourrait ne pas être facile à gérer.

Je ne recommande pas de les utiliser dans des applications courtes comme des projets pour l’auto-pratique, mais c’est à vous de voir. Pour des projets plus importants, par exemple pour un client, c’est souvent un choix judicieux et une bonne pratique de les utiliser.

Il existe de nombreux types de PropTypes et tous ont leurs classes ES6 uniques que nous pouvons utiliser. Nous allons aborder chaque type dans cet article.

Comment utiliser les PropTypes

Avant la sortie de React 15.5.0, les PropTypes étaient disponibles dans le package React, mais maintenant nous devons ajouter la bibliothèque prop-types dans notre projet.

Nous pouvons le faire en exécutant la commande suivante dans notre terminal :

npm install prop-types --save

Nous pouvons utiliser PropTypes pour valider toutes les données que nous recevons des props. Mais avant de l’utiliser, nous devons l’importer comme toujours dans notre application :

import PropTypes de 'prop-types' ;

Ils sont souvent utilisés après la fin du composant et commencent par le nom du composant comme indiqué :

import React de 'react' ;
import { PropTypes } from "prop-types" ;
 
const Count = (props) => {
  return (
    <>
      .........
    
  )
} ;
 
Count.propTypes = {
  //// key est le nom de la prop et
// value est le PropType
}
export default Count ;

Les PropTypes sont également des objets avec une paire clé-valeur où la « clé » est le nom du prop et la valeur représente le type ou la classe par lequel ils sont définis.

Puisque la définition des PropTypes sur un composant ne dépend pas de l’implémentation du composant, nous allons laisser de côté le code du composant lui-même dans tous les exemples suivants. Le code ci-dessus peut être simplifié comme suit :

Count.propTypes = {
// Placez les accessoires ici
}

Voyons d’abord combien il existe de types de PropTypes avant de les comprendre à l’aide d’un exemple.

Types de base de PropTypes

La façon la plus élémentaire de vérifier le type d’une prop est de vérifier si elle appartient à la catégorie des types primitifs en JavaScript, comme un booléen, une chaîne, un objet, etc.

Vous trouverez ci-dessous la liste de tous les types de données considérés comme primitifs ou de base, avec leurs classes, que nous pouvons utiliser pour vérifier les accessoires.

Vous trouverez ci-dessous un exemple qui nous montre comment utiliser ces PropTypes pour la vérification de type dans notre application. Comme nous l’avons déjà dit, ils sont définis comme des objets avec une paire clé-valeur où la clé est le nom de l’objet et la valeur contient les classes qui seront utilisées pour la vérification de type.

Compte.propTypes = {
  nom : PropTypes.string,
  âge : PropTypes.nombre,
  adresse : PropTypes.object,
  amis : PropTypes.array,
} ;

Dans le code ci-dessus, le nom prop est censé avoir une valeur qui est une chaîne, l’âge est un nombre, l’adresse est un objet et les amis sont un tableau. Si une valeur autre que celle-ci a été utilisée pour les mêmes props en tant que valeur, une erreur sera affichée dans la console comme ceci :

Nous pouvons enchaîner n’importe lequel des éléments ci-dessus avec isRequired pour nous assurer qu’un avertissement est affiché si l’accessoire n’est pas fourni.

Count.propTypes = {
  basicObject : PropTypes.object,
  nombres : PropTypes.objectOf(PropTypes.numbers),
  messages : PropTypes.instanceOf(Message),
  liste de contacts : PropTypes.shape({
    nom : PropTypes.string.isRequired,
    téléphone : PropTypes.string.isRequired,
  }),
} ;

Type collectif

Nous avons vu comment valider ou vérifier à quelle catégorie de type de données de base appartiennent les accessoires. Mais il existe de nombreuses autres façons de transmettre et d’utiliser les accessoires, comme les types collectifs tels que les tableaux de nombres, les chaînes de caractères, etc. Alors, qu’en est-il ?

Nous pouvons également vérifier les props pour eux. Vous trouverez ci-dessous les différentes façons dont un type de données peut être combiné et utilisé.

Types de tableaux

Nous allons aborder ici toutes les possibilités qui peuvent être formées avec un tableau, avec leurs exemples, tout comme nous l’avons vu avec les types de base.

Count.propTypes = {
  compte : PropTypes.array,
  utilisateurs : PropTypes.arrayOf(PropTypes.object),
  alarmColor : PropTypes.oneOf(['red', 'blue']),
  description : PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.instanceOf(Title)
  ]),
  }

Types d’objets

Tout comme les types de tableaux, voici quelques-uns des types d’objets collectifs :

Count.propTypes = {
  basicObject : PropTypes.object,
  nombres : PropTypes.objectOf(PropTypes.numbers),
  messages : PropTypes.instanceOf(Message),
  liste de contacts : PropTypes.shape({
    nom : PropTypes.string,
    téléphone : PropTypes.string,
  }),
} ;

Vérification avancée des types

Il existe de nombreux moyens autres que la vérification de type de base que nous pouvons utiliser pour vérifier nos props. Cette méthode se concentre principalement sur le code React plutôt que sur les types de données.

Comment vérifier la présence d’un composant React

Si vous voulez simplement vérifier qu’une propriété est un composant React, vous pouvez utiliser PropTypes.element. Cette méthode est utile pour s’assurer qu’un composant n’a jamais qu’un seul composant enfant.