TypeScript Academy · leksjon

Komponentgenerics – introduksjon

Bygg gjenbrukbare komponenter med typeparametere som , begrensninger og inferens, og send typede render props og nøkler på en trygg måte.

Leksjon 3 av 38 trinn

Komponentgenerics – introduksjon er en gratis leksjon i TypeScript Academy på CoddyKit. Dette er leksjon 3 av 3. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i TypeScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i TypeScript Academy inneholder totalt 3 leksjoner.

Innledning

Mål: Få én komponent til å fungere med mange datastrukturer ved hjelp av <T>. Send inn en typet render prop, begrens nøkler, og la TypeScript utlede T fra bruken.

Generiske props og render-funksjoner
Begrensninger med extends
Uttrekking av nøkler uten any

Generisk List<T>

En generisk List<T> holder items og render samkjørt. Forbrukere kan sende inn hvilken som helst T; inferens 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>
  )
}

Begrensninger med extends

Bruk T extends Keyed for å kreve en id til nøkler. Kallere får feil hvis de sender inn elementer uten det obligatoriske feltet.

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

Utledning av T

Typeparametere blir vanligvis utledet («infer») fra props: her kommer T fra items. Angi bare typen eksplisitt når inferensen 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-hjelpere

Trekk ut gjenbrukbare Render<T>-typer for tydelighet. Legg inn begrensninger ved behov (T extends { id: string }) for å støtte nøkler.

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

Tips og fallgruver

Tips:

Foretrekk inferens, og angi bare typer når det gjør koden mer lesbar.
Bruk extends for å uttrykke krav.
Unngå any i generiske render-props; det undergraver typesikkerheten.

Sjekk av generiske komponenter

Hurtigsjekk: Hvilken deklarasjon definerer en generisk React-komponent korrekt?

Besvar den i den interaktive leksjonen

Oppsummering

Oppsummering: Bruk <T> til å bygge gjenbrukbare komponenter, bruk extends for begrensninger knyttet til nøkler, og la inferens holde koden kortfattet.

Gratis å komme i gang

Lær deg TypeScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 101
Leksjoner: 352

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Komponentgenerics – introduksjon» gratis?

Ja – hele teksten i «Komponentgenerics – introduksjon» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av TypeScript Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i TypeScript Academy inneholder totalt 3 leksjoner.

Hva lærer jeg i «Komponentgenerics – introduksjon»?

Bygg gjenbrukbare komponenter med typeparametere som , begrensninger og inferens, og send typede render props og nøkler på en trygg måte. Du øver på TypeScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med TypeScript Academy?

Ingen tidligere erfaring er nødvendig. TypeScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 3.

Hvor lang tid tar leksjonen «Komponentgenerics – introduksjon»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne TypeScript Academy-leksjonen?

Ja. Alle TypeScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Props og children; hendelsesbehandlere; refs
Tilstand og reducers; typetilordning av Context
Komponentgenerics – introduksjon

← Tilbake til TypeScript Academy