TypeScript Academy · Lektion

Komponenten-Generics – Einführung

Erstellen Sie wiederverwendbare Komponenten mit -Typparametern, Constraints und Inferenz; übergeben Sie typisierte Render-Props und Schlüssel sicher.

Komponenten-Generics – Einführung ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des TypeScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der TypeScript Academy-Kurs umfasst insgesamt 3 Lektionen.

Einführung

Ziel: Lassen Sie eine Komponente mit vielen Datenformen arbeiten, indem Sie <T> verwenden. Sie übergeben einen typisierten Render-Prop, schränken Keys ein und lassen TypeScript T aus der Verwendung ableiten.

Generische Props und Render-Funktionen
Einschränkungen mit extends
Extraktion von Keys ohne any

Generische List<T>

Eine generische List<T> hält items und render aufeinander abgestimmt. Consumer können beliebige T übergeben; die Typinferenz funktioniert, wenn T eindeutig ist.

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>
  )
}

Einschränkungen mit extends

Verwenden Sie T extends Keyed, um für Keys eine id vorauszusetzen. Aufrufende erhalten einen Fehler, wenn sie Items ohne das erforderliche Feld übergeben.

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>} />
}

Inferenz von T

Typparameter werden normalerweise aus den Props abgeleitet: Hier stammt T aus items. Geben Sie den Typ nur an, wenn die Inferenz unklar ist.

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>} />
}

Render-Hilfstypen

Lagern Sie wiederverwendbare Render<T>-Typen aus, um die Übersichtlichkeit zu verbessern. Schränken Sie sie bei Bedarf ein (T extends { id: string }), damit sie Keys unterstützen.

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>} />
}

Tipps und Fallstricke

Tipps:

Bevorzugen Sie die Inferenz; geben Sie Typen nur an, wenn dies die Lesbarkeit verbessert.
Verwenden Sie extends, um Anforderungen auszudrücken.
Vermeiden Sie any in generischen Render-Props; dadurch geht die Typsicherheit verloren.

Prüfung generischer Komponenten

Schnelltest: Welche Deklaration definiert eine generische React-Komponente korrekt?

Zusammenfassung

Zusammenfassung: Verwenden Sie <T>, um wiederverwendbare Komponenten zu erstellen, schränken Sie sie für Keys mit extends ein und lassen Sie die Inferenz den Code kompakt halten.

Häufig gestellte Fragen

Ist die Lektion „Komponenten-Generics – Einführung“ kostenlos?

Ja — der vollständige Text von „Komponenten-Generics – Einführung“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des TypeScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der TypeScript Academy-Kurs umfasst insgesamt 3 Lektionen.

Was lerne ich in „Komponenten-Generics – Einführung“?

Erstellen Sie wiederverwendbare Komponenten mit -Typparametern, Constraints und Inferenz; übergeben Sie typisierte Render-Props und Schlüssel sicher. Du übst TypeScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um TypeScript Academy zu starten?

Keine Vorkenntnisse erforderlich. TypeScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 3.

Wie lange dauert die Lektion „Komponenten-Generics – Einführung“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser TypeScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede TypeScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu TypeScript Academy