Maîtriser TypeScript avec React : un guide étape par étape

??‍♀️ Introduction

TypeScript ajoute un typage statique à JavaScript, ce qui permet de détecter les bogues potentiels avant même leur exécution. Lorsqu'il est associé à React, TypeScript améliore vos composants en appliquant la sécurité des types. Dans cet article, nous passerons en revue les concepts essentiels pour utiliser TypeScript avec React.

---

⚛️ Comment utiliser TypeScript avec React ?

Tout d'abord, vous devez installer TypeScript dans un projet React. Si vous partez de zéro, créez une nouvelle application React avec TypeScript activé :

npx create-react-app my-app --template typescript

Pour un projet existant, vous pouvez ajouter TypeScript en exécutant :

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

Maintenant, vous pouvez commencer à utiliser des fichiers .tsx au lieu de .js ou .jsx, et vos composants React bénéficieront des fonctionnalités de TypeScript.

---

Types d'accessoires de composants React

Lorsque vous définissez un composant dans React, vous pouvez spécifier les types de ses accessoires afin de rendre l'utilisation du composant plus claire et plus sûre. Voici un exemple simple :

type UserProps = {
  name: string;
  age: number;
};

const UserCard = ({ name, age }: UserProps) => (
  <div>
    <h1>{name}</h1>
    <p>{age} years old</p>
  </div>
);

Dans cet exemple, UserCard attend deux accessoires : name (une chaîne) et age (un nombre). Si vous essayez de transmettre des types incorrects, TypeScript affichera une erreur.

---

ReactNode contre ReactElement

Vous vous demandez peut-être quand utiliser ReactNode ou ReactElement pour saisir des composants React.

• ReactNode : Représente tout ce qui peut être rendu par React. Cela inclut les chaînes, les nombres, JSX, les tableaux et null.

• ReactElement : fait référence à un élément React réel, qui est plus spécifique et ne couvre pas les chaînes ou null.

Exemple :

type CardProps = {
  children: ReactNode;
};

const Card = ({ children }: CardProps) => <div>{children}</div>;

// Usage
<Card><p>Hello, World!</p></Card>

ReactNode est utilisé ici car les enfants peuvent être n'importe quel élément rendu, pas seulement des éléments React.

---

Type contre interface

Lors de la définition de la forme d'accessoires ou d'autres objets, le type et l'interface peuvent être utilisés. Alors, quelle est la différence ?

• Type : idéal pour créer des types d'union ou des combinaisons plus complexes.
• Interface : souvent meilleure lorsque vous envisagez d'étendre ou d'implémenter des types supplémentaires.

Voici une comparaison :

// Using type
type ButtonProps = {
  label: string;
  onClick: () => void;
};

// Using interface
interface LinkProps {
  href: string;
  openInNewTab?: boolean;
}

Bien que les deux soient similaires, l'interface peut être étendue plus naturellement :

interface IconButtonProps extends ButtonProps {
  icon: string;
}

---

Comment taper des accessoires avec TypeScript ?

Pour saisir des accessoires pour un composant, déclarez un type ou une interface et transmettez-le comme annotation de type pour les accessoires du composant.

Exemple :

type AlertProps = {
  message: string;
  severity: 'error' | 'warning' | 'info';
};

const Alert = ({ message, severity }: AlertProps) => (
  <div className={`alert ${severity}`}>{message}</div>
);

---

Comment saisir des accessoires de composants fonctionnels ?

Pour saisir les accessoires d'un composant fonctionnel, vous pouvez utiliser React.FC ou déclarez explicitement les accessoires. Alors que React.FC était couramment utilisé, beaucoup préfèrent désormais les types explicites.

Voici un exemple utilisant des types explicites :

type BadgeProps = {
  text: string;
  color: string;
};

const Badge = ({ text, color }: BadgeProps) => (
  <span style={{ backgroundColor: color }}>{text}</span>
);

Dans cet exemple, Badge a deux accessoires, texte et couleur, tous deux saisis sous forme de chaînes.

---

⛓ Réagissez aux Hooks avec TypeScript

Les hooks React peuvent également être saisis en TypeScript pour garantir la sécurité du type pour la logique d'état et d'effet dans vos composants.

Voici comment utiliser useState et useEffect avec TypeScript :

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    console.log(`Count is: ${count}`);
  }, [count]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p>Count: {count}</p>
    </div>
  );
};

Dans cet exemple, le hook useState est saisi pour garantir que le nombre est toujours un nombre, et useEffect enregistre le nombre actuel chaque fois qu'il change.

---

En suivant ces bonnes pratiques, vous serez en mesure d'exploiter tout le potentiel de TypeScript dans vos applications React, conduisant à un code plus robuste et plus maintenable.

Et avant de partir, si vous travaillez également avec SQL, consultez notre aide-mémoire Ultimate SQL pour améliorer vos compétences SQL avec des requêtes de base et avancées !

---

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!