TypeScript avec React

Configuration de TypeScript avec React

Si vous utilisez Create React App, vous pouvez facilement configurer TypeScript en créant un nouveau projet avec le modèle TypeScript :

npx create-react-app mon-projet --template typescript

Si vous avez un projet React existant, vous pouvez ajouter TypeScript en installant les dépendances nécessaires :

npm install --save typescript @types/react @types/react-dom

Ensuite, renommez vos fichiers .js en .tsx pour activer TypeScript.

Typage des props avec TypeScript

TypeScript permet de typer les props d'un composant React pour s'assurer que les bonnes données sont passées. Voici un exemple :

📋 Copier le code

import React from 'react';

interface UserProps {
name: string;
age: number;
isActive?: boolean; // Le point d'interrogation indique que la prop est optionnelle
}

function User({ name, age, isActive = true }: UserProps) {
return (
<div>
	<h1>{name}</h1>
	<p>Âge : {age}</p>
	<p>Statut : {isActive ? 'Actif' : 'Inactif'}</p>
</div>
);
}

export default User;

Explication du code :

• interface UserProps : Définit les types des props du composant User.
• name : Une chaîne de caractères obligatoire.
• age : Un nombre obligatoire.
• isActive : Un booléen optionnel avec une valeur par défaut de true.

Typage de l'état avec useState

TypeScript permet également de typer l'état d'un composant. Voici un exemple avec le hook useState :

📋 Copier le code

import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState<number>(0);

const increment = () => {
setCount(prevCount => prevCount + 1);
};

return (
<div>
	<h1>Compteur : {count}</h1>
	<button onClick={increment}>Incémenter</button>
</div>
);
}

export default Counter;

Explication du code :

• useState<number> : Type l'état count comme un nombre.
• setCount : Une fonction qui met à jour l'état count.

Typage des événements

TypeScript permet de typer les événements, comme les clics ou les changements d'entrée. Voici un exemple :

📋 Copier le code

import React, { useState } from 'react';

function InputField() {
const [value, setValue] = useState<string>('');

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setValue(event.target.value);
};

return (
<div>
	<input type="text" value={value} onChange={handleChange} />
	<p>Valeur saisie : {value}</p>
</div>
);
}

export default InputField;

Explication du code :

• React.ChangeEvent<HTMLInputElement> : Type l'événement de changement pour un élément d'entrée.
• event.target.value : La valeur saisie dans l'input, typée comme une chaîne de caractères.

Utilisation de TypeScript avec les hooks personnalisés

Vous pouvez également utiliser TypeScript pour typer les hooks personnalisés. Voici un exemple :

📋 Copier le code

import { useState } from 'react';

function useToggle(initialValue: boolean = false): [boolean, () => void] {
const [value, setValue] = useState<boolean>(initialValue);
const toggle = () => setValue(prevValue => !prevValue);
return [value, toggle];
}

export default useToggle;

Explication du code :

• useToggle : Un hook personnalisé qui retourne un état booléen et une fonction pour le basculer.
• initialValue : Une valeur booléenne optionnelle avec une valeur par défaut de false.
• toggle : Une fonction qui inverse l'état booléen.

Conclusion

Vous avez maintenant une solide compréhension de l'utilisation de TypeScript avec React. Que ce soit pour typer les props, l'état, les événements ou les hooks personnalisés, TypeScript vous permet d'améliorer la qualité et la maintenabilité de votre code en détectant les erreurs au moment de la compilation.

Pour continuer votre apprentissage, découvrez comment déployer vos applications React dans le chapitre suivant : Déploiement d'Applications React.