0Pricing
TypeScript Academy · Leçon

Props et enfants ; gestionnaires d’événements ; refs

Définissez des props et des enfants typés ; connectez les gestionnaires d’événements en toute sécurité ; créez et utilisez des refs pour accéder aux nœuds du DOM.

Props et enfants ; gestionnaires d’événements ; refs est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 3. 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 3 leçons au total.

Introduction

Objectif : construisez des composants React typés, définissez leurs propriétés (avec des enfants), associez des gestionnaires d’événements aux types précis et donnez le focus à un champ de saisie au moyen de références.

  • Interfaces de propriétés typées
  • Types des gestionnaires d’événements
  • Références pour accéder au DOM

Propriétés typées

Déclarez une interface de propriétés ; utilisez des propriétés facultatives et affinez-les avec des littéraux d’union. Gardez les valeurs par défaut dans le composant.

import React from "react"

interface BadgeProps {
  text: string
  color?: "primary" | "success" | "warning"
}

export function Badge({ text, color = "primary" }: BadgeProps) {
  const bg = color === "success" ? "#16a34a" : color === "warning" ? "#d97706" : "#2563eb"
  return <span style={{ backgroundColor: bg, color: "white", padding: 4, borderRadius: 6 }}>{text}</span>
}

export default function App() {
  return (
    <div style={{ display: "grid", gap: 8 }}>
      <Badge text="Saved" color="success" />
      <Badge text="Warn" color="warning" />
    </div>
  )
}

Enfants

Utilisez PropsWithChildren<T> (ou React.PropsWithChildren) pour ajouter un emplacement typé pour les enfants à vos propriétés.

import React, { PropsWithChildren } from "react"

type CardProps = PropsWithChildren<{ title: string }>

function Card({ title, children }: CardProps) {
  return (
    <div style={{ border: "1px solid #e5e7eb", padding: 12, borderRadius: 8 }}>
      <h3 style={{ margin: 0 }}>{title}</h3>
      <div>{children}</div>
    </div>
  )
}

export default function App() {
  return (
    <Card title="Dashboard">
      <p>Children are typed automatically.</p>
    </Card>
  )
}

Gestionnaires d’événements

Préférez React.MouseEvent<Element> et React.ChangeEvent<HTMLInputElement>. Ils exposent les propriétés typées target/currentTarget.

import React from "react"

export default function App() {
  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    console.log("clicked", e.currentTarget.name)
  }

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    console.log("value", e.target.value)
  }

  return (
    <div style={{ display: "grid", gap: 8 }}>
      <input name="n" onChange={handleChange} placeholder="Type here" />
      <button name="ok" onClick={handleClick}>Confirm</button>
    </div>
  )
}

Références : accès au DOM

useRef<HTMLInputElement>(null) conserve une référence pouvant être nulle ; utilisez le chaînage optionnel pour accéder au nœud DOM en toute sécurité.

import React, { useRef } from "react"

export default function App() {
  const inputRef = useRef<HTMLInputElement>(null)

  const focusInput = () => {
    inputRef.current?.focus()
  }

  return (
    <div style={{ display: "grid", gap: 8 }}>
      <input ref={inputRef} placeholder="Focus me" />
      <button onClick={focusInput}>Focus</button>
    </div>
  )
}

Transmission des références

forwardRef permet aux parents d’accéder au nœud DOM d’un enfant. Indiquez le type d’élément pour obtenir un typage précis.

import React, { forwardRef } from "react"

type TextInputProps = { label: string }

const TextInput = forwardRef<HTMLInputElement, TextInputProps>(function TextInput({ label }, ref) {
  return (
    <label style={{ display: "grid", gap: 4 }}>
      <span>{label}</span>
      <input ref={ref} />
    </label>
  )
})

export default function App() {
  const setRef = (el: HTMLInputElement | null) => { if (el) el.focus() }
  return <TextInput ref={setRef} label="Auto focus" />
}

Vérification du typage des événements

Vérification rapide : quel est le type correct pour un gestionnaire de clic sur un bouton ?

Récapitulatif

Récapitulatif : définissez les propriétés (avec les enfants), typez précisément vos événements et utilisez des références, notamment avec forwardRef, pour accéder aux nœuds DOM en toute sécurité.

Questions Fréquemment Posées

La leçon « Props et enfants ; gestionnaires d’événements ; refs » est-elle gratuite ?

Oui — le texte complet de « Props et enfants ; gestionnaires d’événements ; refs » 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 3 leçons au total.

Qu'est-ce que j'apprendrai dans « Props et enfants ; gestionnaires d’événements ; refs » ?

Définissez des props et des enfants typés ; connectez les gestionnaires d’événements en toute sécurité ; créez et utilisez des refs pour accéder aux nœuds du DOM. 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 1 sur 3.

Combien de temps prend la leçon « Props et enfants ; gestionnaires d’événements ; refs » ?

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

  1. Props et enfants ; gestionnaires d’événements ; refs
  2. État et réducteurs ; typage du Context
  3. Génériques de composants — introduction
← Retour à TypeScript Academy