Frontend Academy · Leçon

TypeScript avec React : génériques, FC et hooks

TypeScript avec React : génériques, FC et hooks est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 3 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 Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Typage des composants

React moderne : annotez les propriétés avec une interface et utilisez une fonction ordinaire. React.FC existe, mais n’est plus recommandé (enfants implicites, absence de prise en charge des génériques).

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

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

Typage des enfants

Utilisez React.ReactNode pour tout enfant pouvant être affiché.

interface CardProps {
  title: string;
  children: React.ReactNode;
}

function Card({ title, children }: CardProps) {
  return (
    <div className="card">
      <h2>{title}</h2>
      {children}
    </div>
  );
}

Typage de useState

useState déduit généralement le type à partir de la valeur initiale. Fournissez un type explicite lorsque la valeur initiale est null ou ne représente pas l’ensemble des types possibles.

const [count, setCount] = useState(0);              // number
const [name, setName] = useState('');                // string

const [user, setUser] = useState<User | null>(null); // explicit
const [items, setItems] = useState<Item[]>([]);      // explicit array type

Typage de useRef

Deux formes : une référence vers un élément du DOM (initialisée à null) ou un conteneur mutable.

const inputRef = useRef<HTMLInputElement>(null);
const timerRef = useRef<number | null>(null);

useEffect(() => {
  inputRef.current?.focus();
  timerRef.current = window.setInterval(tick, 1000);
  return () => clearInterval(timerRef.current!);
}, []);

Typage des gestionnaires d’événements

Utilisez les types d’événements synthétiques de React.

function Form() {
  function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
  }
  function onChange(e: React.ChangeEvent<HTMLInputElement>) {
    setValue(e.target.value);
  }
  function onClick(e: React.MouseEvent<HTMLButtonElement>) {
    /* ... */
  }
  return <form onSubmit={onSubmit}>...</form>;
}

Composants génériques

Les composants peuvent être génériques — TypeScript déduit le paramètre de type à partir de l’appel.

interface ListProps<T> {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
  keyOf: (item: T) => string | number;
}

function List<T>({ items, renderItem, keyOf }: ListProps<T>) {
  return <ul>{items.map(i => <li key={keyOf(i)}>{renderItem(i)}</li>)}</ul>;
}

<List<User>
  items={users}
  renderItem={u => u.name}
  keyOf={u => u.id}
/>

Typage des hooks personnalisés

Les hooks personnalisés sont des fonctions — annotez-les comme n’importe quelle autre fonction. Les tuples renvoyés nécessitent une annotation explicite pour éviter leur élargissement en tableau.

function useToggle(initial = false): [boolean, () => void] {
  const [value, setValue] = useState(initial);
  const toggle = () => setValue(v => !v);
  return [value, toggle]; // tuple — annotation makes this stable
}

const [isOpen, toggle] = useToggle();

Typage du contexte

createContext nécessite une valeur initiale du même type que la valeur que vous fournirez. Utilisez une assertion de non-nullité ou un objet par défaut.

interface AuthContextValue {
  user: User | null;
  signIn: (email: string, pw: string) => Promise<void>;
  signOut: () => void;
}

const AuthContext = createContext<AuthContextValue | null>(null);

export function useAuth() {
  const ctx = useContext(AuthContext);
  if (!ctx) throw new Error('useAuth must be inside AuthProvider');
  return ctx;
}

Typage de useReducer

Annotez explicitement l’état et l’union des actions.

type State = { count: number };
type Action =
  | { type: 'increment' }
  | { type: 'decrement' }
  | { type: 'set'; value: number };

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'increment': return { count: state.count + 1 };
    case 'decrement': return { count: state.count - 1 };
    case 'set':       return { count: action.value };
  }
}

const [state, dispatch] = useReducer(reducer, { count: 0 });

Éviter React.FC

React.FC est passé de mode : il ajoute implicitement des enfants, ne prend pas correctement en charge les composants génériques et empêche certaines optimisations. Préférez les composants fonctionnels ordinaires avec des propriétés typées.

Utilitaire ComponentPropsWithoutRef

Pour hériter des propriétés d’un élément natif (en étendant un bouton ou un champ de saisie), utilisez ComponentPropsWithoutRef.

type ButtonProps = React.ComponentPropsWithoutRef<'button'> & {
  variant?: 'primary' | 'secondary';
};

function Button({ variant = 'primary', ...rest }: ButtonProps) {
  return <button className={`btn ${variant}`} {...rest} />;
}

Vérification rapide

Pourquoi l’utilisation de React.FC est-elle généralement déconseillée au profit de composants fonctionnels simplement typés ?

Récapitulatif : TypeScript + React

Typez les propriétés avec des interfaces et préférez les fonctions simples à React.FC. children : React.ReactNode. useState déduit souvent le type ; annotez-le pour les valeurs nulles ou les tableaux vides. Utilisez useRef pour les éléments DOM. Utilisez les types d’événements React pour les gestionnaires. Utilisez des composants génériques pour les listes et formulaires réutilisables. Le tuple renvoyé par les hooks personnalisés doit être annoté. Utilisez ComponentPropsWithoutRef pour étendre les éléments natifs.

Questions Fréquemment Posées

La leçon « TypeScript avec React : génériques, FC et hooks » est-elle gratuite ?

Oui — le texte complet de « TypeScript avec React : génériques, FC et hooks » 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 Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « TypeScript avec React : génériques, FC et hooks » ?

Définissez le typage des composants React avec des propriétés génériques, annotez useState et useRef avec des types explicites et définissez le typage des hooks personnalisés qui renvoient des tuples. Tu pratiques Frontend 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 Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend 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 3 sur 4.

Combien de temps prend la leçon « TypeScript avec React : génériques, FC et hooks » ?

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 Frontend Academy ?

Oui. Chaque leçon Frontend 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

Types de littéraux de modèles
Décorateurs et métadonnées
TypeScript avec React : génériques, FC et hooks
Mode strict et suppression de any

← Retour à Frontend Academy