Generics dei componenti — introduzione
Crei componenti riutilizzabili con parametri di tipo , vincoli e inferenza; passi in sicurezza render props e chiavi tipizzate.
Generics dei componenti — introduzione è una lezione TypeScript Academy gratuita su CoddyKit. Questa è la lezione 3 di 3. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento TypeScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso TypeScript Academy include 3 lezioni in totale.
Introduzione
Obiettivo: fare in modo che un componente funzioni con molte forme di dati usando <T>. Passerà un render prop tipizzato, limiterà le chiavi e lascerà che TypeScript inferisca T dall'utilizzo.
- Props generiche e funzioni di rendering
- Vincoli con
extends - Estrazione delle chiavi senza any
List<T> generica
Una List<T> generica mantiene coerenti items e render. I consumer possono passare qualsiasi T; l'inferenza funziona quando T è evidente.
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>
)
}Vincoli con extends
Utilizzi T extends Keyed per richiedere un id per le chiavi. I chiamanti ricevono errori se passano elementi privi del campo richiesto.
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>} />
}Inferenza di T
I parametri di tipo di solito vengono inferiti dalle props: qui, T proviene da items. Annoti il tipo solo quando l'inferenza non è chiara.
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>} />
}Funzioni di supporto per il rendering
Estragga tipi Render<T> riutilizzabili per maggiore chiarezza. Imponga un vincolo quando necessario (T extends { id: string }) per supportare le chiavi.
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>} />
}Suggerimenti e insidie
Suggerimenti:
- Preferisca l'inferenza; annoti il tipo solo quando migliora la leggibilità.
- Utilizzi
extendsper esprimere i requisiti. - Eviti
anynei render prop generici: annulla i vantaggi della sicurezza dei tipi.
Verifica del componente generico
Verifica rapida: quale dichiarazione definisce correttamente un componente React generico?
Riepilogo
Riepilogo: utilizzi <T> per creare componenti riutilizzabili, imponga vincoli con extends per le chiavi e lasci che l'inferenza mantenga il codice conciso.
Domande Frequenti
La lezione «Generics dei componenti — introduzione» è gratuita?
Sì — il testo completo di «Generics dei componenti — introduzione» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso TypeScript Academy, passa a CoddyKit PRO. Il corso TypeScript Academy include 3 lezioni in totale.
Cosa imparerò in «Generics dei componenti — introduzione»?
Crei componenti riutilizzabili con parametri di tipo , vincoli e inferenza; passi in sicurezza render props e chiavi tipizzate. Eserciti TypeScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare TypeScript Academy?
Non è richiesta alcuna esperienza precedente. TypeScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 3.
Quanto tempo richiede la lezione «Generics dei componenti — introduzione»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione TypeScript Academy?
Sì. Ogni lezione TypeScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Props e children; gestori degli eventi; refs
- Stato e reducer; tipizzazione del Context
- Generics dei componenti — introduzione