Genéricos de componentes — introdução
Crie componentes reutilizáveis com parâmetros de tipo , restrições e inferência; passe render props e chaves tipados com segurança.
Genéricos de componentes — introdução é uma aula grátis de TypeScript Academy no CoddyKit. Esta é a aula 3 de 3. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de TypeScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de TypeScript Academy inclui 3 aulas no total.
Introdução
Objetivo: faça um único componente funcionar com várias formas de dados usando <T>. Você passará uma propriedade de renderização tipada, restringirá chaves e permitirá que o TypeScript deduza T a partir do uso.
- Props genéricas e funções de renderização
- Restrições com
extends - Extração de chaves sem qualquer
Lista genérica<T>
Uma List<T> genérica mantém itens e renderização alinhados. Os consumidores podem passar qualquer T; a inferência funciona 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>
)
}Restrições com extends
Use T extends Keyed para exigir um id para as chaves. Os chamadores receberão erros se passarem itens sem o campo obrigatório.
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>} />
}Inferência de T
Os parâmetros de tipo geralmente são inferidos a partir das Props: aqui, T vem de items. Faça anotações apenas quando a inferência não for clara.
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>} />
}Auxiliares de renderização
Extraia tipos reutilizáveis Render<T> para maior clareza. Restrinja-os quando necessário (T extends { id: string }) para oferecer suporte às chaves.
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>} />
}Dicas e armadilhas
Dicas:
- Prefira a inferência; faça anotações apenas quando isso melhorar a legibilidade.
- Use
extendspara expressar requisitos. - Evite
anynas Props genéricas de renderização; isso elimina a segurança.
Verificação de componentes genéricos
Verificação rápida: qual declaração define corretamente um componente React genérico?
Recapitulação
Recapitulação: use <T> para criar componentes reutilizáveis, aplique restrições com extends para as chaves e deixe a inferência manter o código conciso.
Perguntas Frequentes
A aula “Genéricos de componentes — introdução” é grátis?
Sim — o texto completo de “Genéricos de componentes — introdução” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de TypeScript Academy, atualize para CoddyKit PRO. O curso de TypeScript Academy inclui 3 aulas no total.
O que vou aprender em “Genéricos de componentes — introdução”?
Crie componentes reutilizáveis com parâmetros de tipo , restrições e inferência; passe render props e chaves tipados com segurança. Você pratica TypeScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar TypeScript Academy?
Nenhuma experiência prévia é necessária. TypeScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 3.
Quanto tempo leva a aula “Genéricos de componentes — introdução”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de TypeScript Academy?
Sim. Cada aula de TypeScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Props e filhos; manipuladores de eventos; refs
- Estado e redutores; tipagem de Context
- Genéricos de componentes — introdução