0Pricing
React Academy · Leçon

Typer les événements et les références dans TypeScript

Utilisez les génériques React.ChangeEvent, React.MouseEvent et RefObject pour les interactions avec le DOM.

Typer les événements et les références dans TypeScript est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 2 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 React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.

Événements synthétiques de React

React encapsule les événements natifs du DOM dans SyntheticEvent. Chaque type d’événement possède un générique spécifique : React.ChangeEvent<HTMLInputElement>, React.MouseEvent<HTMLButtonElement>, etc.

Typer onChange

L’événement le plus courant est onChange sur les champs de saisie. Typez son gestionnaire avec React.ChangeEvent<HTMLInputElement>.

function SearchInput() {
  const [value, setValue] = useState('');

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

  return <input value={value} onChange={handleChange} />;
}

Typer onClick

Les clics sur les boutons utilisent React.MouseEvent<HTMLButtonElement>. Accédez à e.currentTarget, e.preventDefault() et e.stopPropagation() avec un typage complet.

function DeleteButton({ onDelete }: { onDelete: () => void }) {
  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.stopPropagation();
    onDelete();
  };
  return <button onClick={handleClick}>Delete</button>;
}

Typer onSubmit

La soumission d’un formulaire utilise React.FormEvent<HTMLFormElement>. Appelez toujours e.preventDefault() pour empêcher la navigation par défaut du navigateur.

function LoginForm() {
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const form = e.currentTarget;
    const email = (form.elements.namedItem('email') as HTMLInputElement).value;
    console.log(email);
  };
  return (
    <form onSubmit={handleSubmit}>
      <input name="email" />
      <button type="submit">Login</button>
    </form>
  );
}

Typer les événements clavier

Utilisez React.KeyboardEvent<HTMLElement> pour typer les gestionnaires d’événements clavier. Accédez à e.key, e.code et e.ctrlKey en toute sécurité.

function CommandInput() {
  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter' && e.metaKey) {
      submitCommand();
    }
  };
  return <input onKeyDown={handleKeyDown} />;
}

useRef pour les éléments du DOM

Fournissez le type de l’élément HTML comme générique à useRef et initialisez la référence à null. TypeScript sait alors que la référence contient ce type d’élément.

function AutoFocusInput() {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    inputRef.current?.focus();
  }, []);

  return <input ref={inputRef} />;
}

Référence mutable ou référence DOM

Lorsque vous stockez une valeur mutable, et non un nœud DOM, initialisez useRef avec une valeur plutôt qu’avec null. TypeScript déduit alors une MutableRefObject mutable.

// DOM ref (read-only current)
const divRef = useRef<HTMLDivElement>(null);

// Mutable ref (read-write current)
const countRef = useRef<number>(0);
countRef.current += 1; // ✓ no TypeScript error

Typer useImperativeHandle

Lorsque vous exposez une API de référence depuis un composant enfant, définissez une interface pour cette API et utilisez-la à la fois dans forwardRef et dans useImperativeHandle.

interface DialogHandle {
  open: () => void;
  close: () => void;
}

const Dialog = forwardRef<DialogHandle, { title: string }>((props, ref) => {
  useImperativeHandle(ref, () => ({
    open: () => console.log('open'),
    close: () => console.log('close'),
  }));
  return <div>{props.title}</div>;
});

Rappels de référence

Un rappel de référence reçoit l’élément DOM ou null. Typez-le ainsi : (node: HTMLElement | null) => void.

function MeasureDiv() {
  const [height, setHeight] = useState(0);

  const measuredRef = (node: HTMLDivElement | null) => {
    if (node) setHeight(node.getBoundingClientRect().height);
  };

  return <div ref={measuredRef}>Content: {height}px tall</div>;
}

Cible de l’événement ou cible actuelle

e.target est l’élément qui a déclenché l’événement ; e.currentTarget est l’élément auquel le gestionnaire est attaché. Effectuez une conversion de type de e.target lorsque vous avez besoin de propriétés spécifiques.

const handleClick = (e: React.MouseEvent<HTMLUListElement>) => {
  const target = e.target as HTMLLIElement;
  console.log(target.dataset.id);
};

Type générique de gestionnaire d’événement

Pour écrire des fonctions de gestion d’événements réutilisables, utilisez le générique React.EventHandler<Event> ou écrivez simplement la signature complète de la fonction directement.

type InputChangeHandler = React.ChangeEventHandler<HTMLInputElement>;

const logChange: InputChangeHandler = (e) => {
  console.log(e.target.value); // e is fully typed
};

Vérification rapide

Quel type TypeScript devez-vous utiliser pour un useRef qui contient un HTMLInputElement ?

Récapitulatif

Typez les gestionnaires d’événements avec les génériques React.ChangeEvent, React.MouseEvent et React.FormEvent. Typez les références DOM avec useRef<HTMLElement>(null) et les références mutables avec le type de la valeur. Utilisez forwardRef avec une interface d’API explicite pour les API impératives.

Questions Fréquemment Posées

La leçon « Typer les événements et les références dans TypeScript » est-elle gratuite ?

Oui — le texte complet de « Typer les événements et les références dans TypeScript » 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 React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Typer les événements et les références dans TypeScript » ?

Utilisez les génériques React.ChangeEvent, React.MouseEvent et RefObject pour les interactions avec le DOM. Tu pratiques React 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 React Academy ?

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

Combien de temps prend la leçon « Typer les événements et les références dans TypeScript » ?

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

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

  1. Typer les propriétés et les types de retour des composants
  2. Typer les événements et les références dans TypeScript
  3. Composants génériques et types utilitaires
  4. Typer le contexte et les hooks personnalisés
← Retour à React Academy