ReactJS - Vérification de type statique

Bonjour là-bas, futurs développeurs React ! Aujourd'hui, nous allons entreprendre un voyage passionnant à travers le monde de la vérification de type statique dans ReactJS. En tant que votre enseignant de science informatique du coin, je suis là pour vous guider à travers ce concept important, étape par étape. Ne vous inquiétez pas si vous êtes nouveau dans la programmation - nous allons commencer par les bases et progresser pas à pas !

Qu'est-ce que la vérification de type statique ?

Avant de plonger dans les spécificités de ReactJS, comprenons ce qu'est la vérification de type statique. Imaginez que vous cuisinez un gâteau. Vous n'utiliseriez pas de sel à la place du sucre, n'est-ce pas ? C'est parce que vous savez quel type d'ingrédient vous avez besoin. La vérification de type statique est similaire - elle nous aide à utiliser les bons types de données dans notre code.

Dans la programmation, la vérification de type statique est un processus qui vérifie les types de nos variables, des paramètres de fonction et des valeurs de retour avant que le code ne soit exécuté. C'est comme avoir un ami utile qui vérifie doublement votre recette avant que vous commencez à cuire !

Pourquoi utiliser la vérification de type statique dans React ?

Vous vous demandez peut-être, "Pourquoi avons-nous besoin de cela dans React ?" Eh bien, laissez-moi vous raconter une petite histoire. Il fut un temps, dans un pays lointain (en fait, dans mon ancien travail), nous avions un grand projet React. Tout semblait bien jusqu'à ce que nous commencions à recevoir des erreurs étranges en production. Il s'est avéré que nous passions des types de données incorrects à certains composants. Si seulement nous avions utilisé la vérification de type statique, nous aurions pu attraper ces problèmes tôt !

La vérification de type statique dans React nous aide à :

1. Attraper les erreurs tôt dans le développement
2. Améliorer la qualité et la lisibilité du code
3. Fournir une meilleure documentation
4. Améliorer l'expérience de développement avec une meilleure autocomplete

Introduction à Flow

Maintenant que nous savons pourquoi la vérification de type statique est importante, rencontrons notre nouveau ami : Flow. Flow est un vérificateur de type statique pour JavaScript, créé par Facebook (les mêmes gens qui nous ont donné React). C'est comme un super-héros pour votre code, attrapant les problèmes liés aux types avant qu'ils ne deviennent des problèmes !

Configuration de Flow dans un projet React

Mettons les mains dans le cambouis et configurons Flow dans un projet React. Ne vous inquiétez pas, je vais vous guider à travers chaque étape !

1. Premièrement, créons un nouveau projet React :

npx create-react-app my-flow-app
cd my-flow-app

2. Maintenant, installons Flow :

npm install --save-dev flow-bin

3. Ajoutons un script Flow à votre package.json :

{
"scripts": {
"flow": "flow"
}
}

4. Initialisons Flow :

npm run flow init

Cela crée un fichier .flowconfig dans le répertoire racine de votre projet.

5. Ajoutez // @flow en haut de tout fichier que vous souhaitez que Flow vérifie.

Utilisation de Flow dans les composants React

Maintenant que nous avons configuré Flow, voyons comment nous pouvons l'utiliser dans nos composants React. Commençons par un exemple simple :

// @flow
import React from 'react';

type Props = {
name: string,
age: number
};

function Greeting({ name, age }: Props) {
return <h1>Bonjour, {name} ! Vous avez {age} ans.</h1>;
}

export default Greeting;

Décomposons cela :

• // @flow en haut indique à Flow de vérifier ce fichier.
• Nous définissons un type Props avec name comme chaîne de caractères et age comme nombre.
• Dans les paramètres de fonction, nous utilisons : Props pour indiquer à Flow que cette fonction attend des props de type Props.

Maintenant, si nous essayons d'utiliser ce composant incorrectement, Flow nous avertira :

// Cela provoquera une erreur Flow
<Greeting name={42} age="vingt" />

Flow nous dira que nous essayons de passer un nombre pour name (qui devrait être une chaîne de caractères) et une chaîne de caractères pour age (qui devrait être un nombre).

Flow avec l'état React

Flow peut également nous aider avec l'état de React. Voici un exemple :

// @flow
import React, { useState } from 'react';

type State = {
count: number
};

function Counter() {
const [state, setState] = useState<State>({ count: 0 });

const increment = () => {
setState(prevState => ({ count: prevState.count + 1 }));
};

return (
<div>
<p>Compte : {state.count}</p>
<button onClick={increment}>Incrémenter</button>
</div>
);
}

export default Counter;

Dans cet exemple :

• Nous définissons un type State avec une propriété count de type nombre.
• Nous utilisons useState<State> pour indiquer à Flow que notre état devrait correspondre au type State.

Flow avec les props React

Voyons un exemple plus complexe avec des props :

// @flow
import React from 'react';

type Props = {
items: Array<string>,
onItemClick: (item: string) => void
};

function ItemList({ items, onItemClick }: Props) {
return (
<ul>
{items.map((item, index) => (
<li key={index} onClick={() => onItemClick(item)}>
{item}
</li>
))}
</ul>
);
}

export default ItemList;

Voici ce qui se passe :

• Nous définissons Props avec un tableau items de chaînes de caractères et une fonction onItemClick qui prend une chaîne de caractères et ne retourne rien (void).
• Flow s'assurera que lorsque nous utilisons ce composant, nous passons les bons types de props.

Table des méthodes Flow

Voici un tableau de certaines méthodes Flow couramment utilisées dans React :

Méthode	Description	Exemple
type	Définit un nouveau type	type Props = { name: string };
interface	Définit une nouvelle interface	interface User { name: string, age: number }
$ReadOnly<T>	Rend toutes les propriétés dans T en lecture seule	type Props = $ReadOnly<{ name: string }>;
$Shape<T>	Rend toutes les propriétés dans T optionnelles	type PartialUser = $Shape<User>;
$ElementType<T, K>	Obtient le type d'un élément dans un tableau ou un objet	type Name = $ElementType<User, 'name'>;
$Keys<T>	Obtient une union des types de toutes les clés dans T	type UserKeys = $Keys<User>;
$Values<T>	Obtient une union des types de toutes les valeurs dans T	type UserValues = $Values<User>;

Conclusion

Et voilà, amis ! Nous avons fait nos premiers pas dans le monde de la vérification de type statique avec Flow dans React. Souvenez-vous, comme pour toute nouvelle compétence, cela peut sembler un peu difficile au début. Mais avec de la pratique, vous trouverez que Flow devient un outil inestimable dans votre boîte à outils de développement React.

La vérification de type statique peut sembler comme un travail supplémentaire maintenant, mais croyez-moi, votre futur vous remerciera d'avoir attrapé ces erreurs de type avant qu'elles ne deviennent des bugs en production !

Continuez à coder, continuez à apprendre, et surtout, amusez-vous ! Utiliser Flow avec React, c'est comme avoir un superpouvoir - utilisez-le intelligemment, et votre code sera plus fort, plus sûr et plus facile à comprendre. Jusqu'à la prochaine fois, bon codage !

Credits: Image by storyset