TypeScript Academy · Leçon

Composants génériques et forwardRef

Créez des composants typés et réutilisables avec des génériques

Composants génériques et forwardRef est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage TypeScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours TypeScript Academy comprend 4 leçons au total.

Bienvenue

Cette leçon porte sur les composants génériques et forwardRef en TypeScript avec React.

Interface des propriétés du composant

Définissez une interface de propriétés pour les composants React afin de documenter et de garantir l'API du composant.

interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
}

function Button({ label, onClick, disabled }: ButtonProps) {
  return <button onClick={onClick} disabled={disabled}>{label}</button>;
}

FC ou type de retour explicite

React.FC ajoute automatiquement les éléments enfants et d'autres types. Un type de retour explicite (JSX.Element | null) est souvent plus clair.

const Card: React.FC<{title: string}> = ({ title }) => <div>{title}</div>;

// Or explicit:
function Card2({ title }: { title: string }): JSX.Element {
  return <div>{title}</div>;
}

Typage de useState

useState déduit le type à partir de la valeur initiale. Fournissez un paramètre de type lorsque la valeur initiale est null ou ambiguë.

const [count, setCount] = useState(0);           // number
const [name, setName] = useState('');            // string
const [user, setUser] = useState<User | null>(null); // explicit

Typage de useReducer

useReducer fonctionne au mieux avec un type d'action formant une union discriminée.

type Action = { type: 'increment' } | { type: 'decrement' } | { type: 'reset'; value: number };
function reducer(state: number, action: Action): number {
  switch (action.type) {
    case 'increment': return state + 1;
    case 'decrement': return state - 1;
    case 'reset': return action.value;
  }
}

Typage de useRef pour le DOM

useRef nécessite un argument de type pour les éléments du DOM. Initialisez-le avec null puisque l'élément n'existe pas encore.

const inputRef = useRef<HTMLInputElement>(null);

// Use:
if (inputRef.current) {
  inputRef.current.focus();
}

Typage des gestionnaires d'événements

Les types d'événements de React incluent React.ChangeEvent, React.MouseEvent et React.FormEvent.

function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
  console.log(e.target.value);
}
function handleClick(e: React.MouseEvent<HTMLButtonElement>) {
  e.preventDefault();
}

Composants génériques

Les composants génériques acceptent un paramètre de type pour créer des listes et des listes de sélection flexibles et sûres du point de vue des types.

function List<T extends { id: number }>({ items }: { items: T[] }) {
  return <ul>{items.map(i => <li key={i.id}>{JSON.stringify(i)}</li>)}</ul>;
}

forwardRef avec TypeScript

forwardRef nécessite des paramètres de type pour le type de l'élément référencé et pour les propriétés.

const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ label, ...props }, ref) => (
    <label>{label}<input {...props} ref={ref} /></label>
  )
);

Types de retour des hooks personnalisés

Typez explicitement les valeurs de retour des hooks personnalisés afin d'éviter que les retours sous forme de tuples soient déduits comme any[].

function useToggle(init: boolean): [boolean, () => void] {
  const [state, setState] = useState(init);
  return [state, () => setState(s => !s)];
}

Contexte avec TypeScript

Typez le contexte React avec une union qui inclut undefined afin d'obliger les consommateurs à vérifier la présence du contexte.

const AuthContext = React.createContext<User | undefined>(undefined);
function useAuth(): User {
  const ctx = useContext(AuthContext);
  if (!ctx) throw new Error('useAuth must be used within AuthProvider');
  return ctx;
}

Vérification rapide

Quel est le type correct pour une référence vers un élément input HTML ?

Récapitulatif

Typez les propriétés React avec des interfaces, useState avec des paramètres de type, les événements avec les types d'événements React, les références avec des génériques d'éléments du DOM et forwardRef avec deux paramètres de type. Les composants génériques permettent de créer une interface utilisateur réutilisable et sûre du point de vue des types.

Questions Fréquemment Posées

La leçon « Composants génériques et forwardRef » est-elle gratuite ?

Oui — le texte complet de « Composants génériques et forwardRef » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours TypeScript Academy, passe à CoddyKit PRO. Le cours TypeScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Composants génériques et forwardRef » ?

Créez des composants typés et réutilisables avec des génériques Tu pratiques TypeScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer TypeScript Academy ?

Aucune expérience préalable n'est requise. TypeScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Composants génériques et forwardRef » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon TypeScript Academy ?

Oui. Chaque leçon TypeScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Typer les propriétés des composants React
Typer useState et useReducer
Typer useRef et les gestionnaires d’événements
Composants génériques et forwardRef

← Retour à TypeScript Academy