Astuces pratiques de typage avec TypeScript dans React

Dans cette discussion, nous allons explorer quelques pratiques pour tirer pleinement parti des fonctionnalités de typage offertes par TypeScript lors du développement avec React.

#TypeScript et React

Dans le paysage du développement web moderne, l'utilisation de TypeScript en tandem avec React offre une combinaison puissante pour améliorer la robustesse et la maintenabilité des applications. Ce rapport explore cette synergie en fournissant une introduction à TypeScript, un aperçu de React, et en détaillant les bénéfices de l'intégration des deux.

#Astuce 1 : ComponentProps

L'utilité principale du type ComponentProps est d'assurer qu'un Composant accepte uniquement les propriétés valides pour un élément HTML. Cela ajoute une couche de sécurité en s'assurant que le composant est utilisé correctement et en évitant les erreurs de typage.

En utilisant des types génériques comme ComponentProps, le code devient plus générique et réutilisable, ce qui facilite la maintenance et la collaboration dans des projets complexes.

import { ComponentProps, FunctionComponent } from "react";
 
// Définition d'un type ButtonProps en utilisant ComponentProps
type ButtonProps = ComponentProps<"button">;
 
// Définition d'un composant de bouton avec le type ButtonProps
export const Button: FunctionComponent<ButtonProps> = (props) => {
  // Le composant retourne un élément de bouton avec les propriétés passées
  return <button {...props}>{props.children}</button>;
};

Ici, on s'assure que le composant Button accepte uniquement les propriétés valides pour un élément <button>.

#Astuce 2 : PropsWithChildren

Le type PropsWithChildren est un utilitaire TypeScript spécifique à React qui est utilisé pour définir les propriétés d'un composant fonctionnel en incluant explicitement la possibilité d'avoir des éléments enfants (children). En React, les éléments enfants sont le contenu situé entre les balises d'ouverture et de fermeture d'un composant.

L'utilité principale du type PropsWithChildren réside dans sa capacité à améliorer la clarté du code et à faciliter la manipulation des éléments enfants dans un composant. En déclarant explicitement que le composant peut accepter des éléments enfants, les développeurs peuvent s'assurer que cette possibilité est prise en compte lors de l'utilisation du composant.

import { PropsWithChildren, FunctionComponent } from 'react';
 
// Utilisation de PropsWithChildren pour définir les propriétés du composant
type MyComponentProps = PropsWithChildren<{
  // Propriétés spécifiques du composant
  title: string;
  // ...
}>;
 
// Définition du composant fonctionnel avec les propriétés définies par MyComponentProps
const MyComponent: FunctionComponent<MyComponentProps> = ({ title, children }) => {
  return (
    <div>
      <h1>{title}</h1>
      <div>{children}</div>
    </div>
  );
};

Dans cet exemple, PropsWithChildren est utilisé pour définir MyComponentProps, qui inclut à la fois des propriétés spécifiques (title dans cet exemple) et la possibilité d'avoir des éléments enfants (children). L'utilisation de PropsWithChildren rend explicite le fait que ce composant peut recevoir et traiter des éléments enfants, améliorant ainsi la documentation du code et la compréhension du comportement du composant.

#Astuce 3 : Gestion des états

La gestion des états dans une application React avec TypeScript est cruciale pour assurer la robustesse du code et la prévention des erreurs. Lors de la gestion des états locaux par exemple ou encore dans le cas d'états asynchrones, tels que les données récupérées depuis une API.

import { useState, useEffect, FunctionComponent } from "react";
 
// Définition du type User
type User = {
  id: number;
  name: string;
  email: string;
};
 
export const UserComponent: FunctionComponent = () => {
  // Déclaration d'un état local 'users'
  const [users, setUsers] = useState<User[]>([]);
 
  // Utilisation du hook useEffect pour effectuer une opération asynchrone lors du rendu initial du composant
  useEffect(() => {
    const fetchUsers = async () => {
      const response = await fetch(
        "https://jsonplaceholder.typicode.com/users"
      );
      const data = await response.json();
      setUsers(data);
    };
    fetchUsers();
  }, []);
 
  // Rendu du composant
  return (
    <div>
      <h1>Liste des utilisateurs</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            {user.name} - {user.email}
          </li>
        ))}
      </ul>
    </div>
  );
};

Ici, le composant récupère une liste d'utilisateurs depuis une API externe lors du montage initial, stocke ces utilisateurs dans un état local, puis les affiche dans une liste.

L'utilisation de TypeScript avec React apporte des avantages significatifs en termes de sécurité, de maintenabilité et de collaboration dans le développement d'applications web. Les astuces mentionnées, telles que l'utilisation de ComponentProps et PropsWithChildren pour le typage des composants, ainsi que la gestion appropriée des états, contribuent à la création de code plus robuste et plus compréhensible. Intégrer ces bonnes pratiques dans le processus de développement peut grandement améliorer la qualité des applications React.

Par : Jeansamist