0Pricing
TypeScript Academy · Leçon

Génériques de composants — introduction

Construisez des composants réutilisables avec des paramètres de type , des contraintes et l’inférence ; transmettez sûrement des render props et des clés typées.

Génériques de composants — introduction est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 3 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 : faites fonctionner un seul composant avec de nombreuses formes de données grâce à <T>. Vous transmettrez une propriété de rendu typée, restreindrez les clés et laisserez TypeScript déduire T à partir de l’utilisation.

  • Propriétés génériques et fonctions de rendu
  • Contraintes avec extends
  • Extraction des clés sans type quelconque

Liste générique<T>

Une List<T> générique maintient la cohérence entre les éléments et le rendu. Les consommateurs peuvent transmettre n’importe quel T ; la déduction fonctionne lorsque T est évident.

import React from "react"

type ListProps<T> = { items: T[]; render: (item: T, index: number) => React.ReactNode }

export function List<T>({ items, render }: ListProps<T>) {
  return <div style={{ display: "grid", gap: 6 }}>{items.map(render)}</div>
}

export default function App() {
  return (
    <div style={{ display: "grid", gap: 12 }}>
      <List<number> items={[1,2,3]} render={(n) => <span>#{n}</span>} />
      <List<{ id: string; name: string }>
        items={[{ id: "u1", name: "Ada" }, { id: "u2", name: "Lin" }]}
        render={(u) => <strong>{u.name}</strong>}
      />
    </div>
  )
}

Contraintes avec extends

Utilisez T extends Keyed pour exiger un id destiné aux clés. Les appelants obtiennent des erreurs s’ils transmettent des éléments sans le champ requis.

import React from "react"

type Keyed = { id: string }

type KeyListProps<T extends Keyed> = { items: T[]; render: (item: T) => React.ReactNode }

export function KeyList<T extends Keyed>({ items, render }: KeyListProps<T>) {
  return (
    <ul>
      {items.map((x) => (
        <li key={x.id}>{render(x)}</li>
      ))}
    </ul>
  )
}

export default function App() {
  const users = [{ id: "u1", name: "Ada" }, { id: "u2", name: "Lin" }]
  return <KeyList items={users} render={(u) => <span>{u.name}</span>} />
}

Déduction de T

Les paramètres de type sont généralement déduits des propriétés : ici, T provient de items. N’ajoutez une annotation que lorsque la déduction n’est pas claire.

import React from "react"

type GridProps<T> = { items: T[]; columns?: number; render: (item: T) => React.ReactNode }

export function Grid<T>({ items, columns = 2, render }: GridProps<T>) {
  const css = { display: "grid", gridTemplateColumns: `repeat(${columns}, 1fr)`, gap: 8 }
  return <div style={css as React.CSSProperties}>{items.map(render)}</div>
}

export default function App() {
  const products = [
    { sku: "p1", title: "Mouse", price: 25 },
    { sku: "p2", title: "Keyboard", price: 80 }
  ]
  // T is inferred from products; no need to annotate
  return <Grid items={products} render={(p) => <span>{p.title} — ${p.price}</span>} />
}

Assistants de rendu

Extrayez des types Render<T> réutilisables pour plus de clarté. Ajoutez une contrainte si nécessaire (T extends { id: string }) afin de prendre en charge les clés.

import React from "react"

type Render<T> = (item: T) => React.ReactNode

type TableProps<T extends { id: string }> = { items: T[]; renderRow: Render<T> }

export function Table<T extends { id: string }>({ items, renderRow }: TableProps<T>) {
  return (
    <table>
      <tbody>
        {items.map((x) => (
          <tr key={x.id}><td>{renderRow(x)}</td></tr>
        ))}
      </tbody>
    </table>
  )
}

export default function App() {
  const rows = [ { id: "1", label: "One" }, { id: "2", label: "Two" } ]
  return <Table items={rows} renderRow={(r) => <span>{r.label}</span>} />
}

Conseils et pièges

Conseils :

  • Préférez la déduction ; ajoutez une annotation uniquement si elle améliore la lisibilité.
  • Utilisez extends pour exprimer les contraintes.
  • Évitez any dans les propriétés de rendu génériques ; cela annule la sécurité.

Vérification des composants génériques

Vérification rapide : quelle déclaration définit correctement un composant React générique ?

Récapitulatif

Récapitulatif : utilisez <T> pour créer des composants réutilisables, imposez des contraintes avec extends pour les clés et laissez la déduction rendre le code concis.

Questions Fréquemment Posées

La leçon « Génériques de composants — introduction » est-elle gratuite ?

Oui — le texte complet de « Génériques de composants — introduction » 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 « Génériques de composants — introduction » ?

Construisez des composants réutilisables avec des paramètres de type , des contraintes et l’inférence ; transmettez sûrement des render props et des clés typées. 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 3 sur 3.

Combien de temps prend la leçon « Génériques de composants — introduction » ?

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