TypeScript Academy · Lektion

Komponentgenerics — introduktion

Byg genanvendelige komponenter med -typeparametre, begrænsninger og inferens, og videregiv typede render props og keys sikkert.

Lektion 3 af 38 trin

Komponentgenerics — introduktion er en gratis TypeScript Academy-lektion på CoddyKit. Dette er lektion 3 af 3. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i TypeScript Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. TypeScript Academy-kurset indeholder 3 lektioner i alt.

Introduktion

Mål: Få én komponent til at fungere med mange datatyper ved hjælp af <T>. Du sender en typeangiven render-prop, begrænser nøgler og lader TypeScript udlede T ud fra brugen.

Generiske props og render-funktioner
Begrænsninger med extends
Udtrækning af nøgler uden any

Generisk List<T>

En generisk List<T> holder items og render på linje. Forbrugere kan sende enhver T; typeudledning fungerer, når T er tydelig.

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

Begrænsninger med extends

Brug T extends Keyed for at kræve et id til nøgler. Kaldere får fejl, hvis de sender elementer uden det krævede felt.

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

Udledning af T

Typeparametre bliver normalt udledt fra props: her kommer T fra items. Angiv kun typen, når udledningen er uklar.

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-hjælpere

Udtræk genanvendelige Render<T>-typer for tydelighed. Tilføj om nødvendigt en begrænsning (T extends { id: string }) for at understøtte nøgler.

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

Tip og faldgruber

Tip:

Foretræk typeudledning; angiv kun typer, når det forbedrer læsbarheden.
Begræns med extends for at udtrykke krav.
Undgå any i generiske render-props; så forsvinder typesikkerheden.

Kontrol af generiske komponenter

Hurtigt tjek: Hvilken erklæring definerer korrekt en generisk React-komponent?

Besvar den i den interaktive lektion

Opsummering

Opsummering: Brug <T> til at bygge genanvendelige komponenter, begræns med extends for nøgler, og lad typeudledningen holde koden kort.

Gratis at komme i gang

Lær TypeScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 101
Lektioner: 352

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Komponentgenerics — introduktion” gratis?

Ja — hele teksten til “Komponentgenerics — introduktion” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af TypeScript Academy-kurset, skal du opgradere til CoddyKit PRO. TypeScript Academy-kurset indeholder 3 lektioner i alt.

Hvad lærer jeg i “Komponentgenerics — introduktion”?

Byg genanvendelige komponenter med -typeparametre, begrænsninger og inferens, og videregiv typede render props og keys sikkert. Du øver dig i TypeScript Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på TypeScript Academy?

Der kræves ingen tidligere erfaring. TypeScript Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 3.

Hvor lang tid tager lektionen “Komponentgenerics — introduktion”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne TypeScript Academy-lektion?

Ja. Alle TypeScript Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til TypeScript Academy