TypeScript Academy · Lektion

Komponentgenerics – introduktion

Bygg återanvändbara komponenter med typparametrar av typen , begränsningar och inferens. Skicka typade render props och nycklar på ett säkert sätt.

Lektion 3 av 38 steg

Komponentgenerics – introduktion är en gratis lektion i TypeScript Academy på CoddyKit. Detta är lektion 3 av 3. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för TypeScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i TypeScript Academy innehåller totalt 3 lektioner.

Introduktion

Mål: Låt en komponent fungera för många datatyper med hjälp av <T>. Du skickar in en typad render prop, begränsar nycklar och låter TypeScript härleda T utifrån användningen.

Generiska props och render-funktioner
Begränsningar med extends
Extrahera nycklar utan any

Generisk List<T>

En generisk List<T> håller items och render synkroniserade. Komponentens användare kan skicka in valfritt T; typinferensen fungerar när T är uppenbart.

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änsningar med extends

Använd T extends Keyed för att kräva ett id för nycklar. Anropare får fel om de skickar in objekt utan det obligatoriska fältet.

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

Inferens av T

Typparametrar härleds vanligtvis från props: här kommer T från items. Ange bara typen när inferensen är oklar.

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älpfunktioner

Extrahera återanvändbara typer som Render<T> för tydlighetens skull. Begränsa vid behov (T extends { id: string }) för att stödja nycklar.

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 och fallgropar

Tips:

Föredra inferens och ange bara typer när det förbättrar läsbarheten.
Använd extends för att uttrycka krav.
Undvik any i generiska render props; det omintetgör typsäkerheten.

Kontroll av generiska komponenter

Snabb kontroll: Vilken deklaration definierar korrekt en generisk React-komponent?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Sammanfattning: Använd <T> för att bygga återanvändbara komponenter, begränsa med extends för nycklar och låt inferensen hålla koden kort och tydlig.

Gratis att börja

Lär dig TypeScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 101
Lektioner: 352

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Komponentgenerics – introduktion” gratis?

Ja – hela texten till ”Komponentgenerics – introduktion” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i TypeScript Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i TypeScript Academy innehåller totalt 3 lektioner.

Vad lär jag mig i ”Komponentgenerics – introduktion”?

Bygg återanvändbara komponenter med typparametrar av typen , begränsningar och inferens. Skicka typade render props och nycklar på ett säkert sätt. Ni övar på TypeScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig TypeScript Academy?

Du behöver inga förkunskaper. Utbildningen i TypeScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 3.

Hur lång tid tar lektionen ”Komponentgenerics – introduktion”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här TypeScript Academy-lektionen?

Ja. Varje TypeScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Props och children; händelsehanterare; refs
State och reducers; Context-typning
Komponentgenerics – introduktion

← Tillbaka till TypeScript Academy