TypeScript Academy · Aula

Componentes genéricos e forwardRef

Crie componentes tipados e reutilizáveis com genéricos

Componentes genéricos e forwardRef é uma aula grátis de TypeScript Academy no CoddyKit. Esta é a aula 4 de 4. 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 4 aulas no total.

Boas-vindas

Esta lição aborda componentes genéricos e forwardRef em TypeScript com React.

Interface de propriedades do componente

Defina uma interface de propriedades para os componentes React a fim de documentar e impor a API do componente.

interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
}

function Button({ label, onClick, disabled }: ButtonProps) {
  return <button onClick={onClick} disabled={disabled}>{label}</button>;
}

FC versus tipo de retorno explícito

React.FC adiciona filhos e outros tipos automaticamente. O tipo de retorno explícito (JSX.Element | null) costuma ser mais claro.

const Card: React.FC<{title: string}> = ({ title }) => <div>{title}</div>;

// Or explicit:
function Card2({ title }: { title: string }): JSX.Element {
  return <div>{title}</div>;
}

Tipagem de useState

useState infere o tipo a partir do valor inicial. Forneça um parâmetro de tipo quando o valor inicial for null ou ambíguo.

const [count, setCount] = useState(0);           // number
const [name, setName] = useState('');            // string
const [user, setUser] = useState<User | null>(null); // explicit

Tipagem de useReducer

useReducer funciona melhor com um tipo de ação que seja uma união discriminada.

type Action = { type: 'increment' } | { type: 'decrement' } | { type: 'reset'; value: number };
function reducer(state: number, action: Action): number {
  switch (action.type) {
    case 'increment': return state + 1;
    case 'decrement': return state - 1;
    case 'reset': return action.value;
  }
}

Tipagem de useRef para DOM

useRef para elementos DOM precisa de um argumento de tipo. Inicialize-o com null, pois o elemento ainda não existe.

const inputRef = useRef<HTMLInputElement>(null);

// Use:
if (inputRef.current) {
  inputRef.current.focus();
}

Tipagem de manipuladores de eventos

Os tipos de eventos do React incluem React.ChangeEvent, React.MouseEvent e React.FormEvent.

function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
  console.log(e.target.value);
}
function handleClick(e: React.MouseEvent<HTMLButtonElement>) {
  e.preventDefault();
}

Componentes genéricos

Os componentes genéricos aceitam um parâmetro de tipo para listas e seleções flexíveis e seguras quanto aos tipos.

function List<T extends { id: number }>({ items }: { items: T[] }) {
  return <ul>{items.map(i => <li key={i.id}>{JSON.stringify(i)}</li>)}</ul>;
}

forwardRef com TypeScript

forwardRef precisa de parâmetros de tipo tanto para o tipo do elemento da referência quanto para as propriedades.

const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ label, ...props }, ref) => (
    <label>{label}<input {...props} ref={ref} /></label>
  )
);

Tipos de retorno de ganchos personalizados

Tipifique explicitamente os valores retornados por ganchos personalizados para evitar que retornos de tupla sejam inferidos como any[].

function useToggle(init: boolean): [boolean, () => void] {
  const [state, setState] = useState(init);
  return [state, () => setState(s => !s)];
}

Contexto com TypeScript

Tipifique o contexto do React com uma união que inclua undefined para obrigar os consumidores a verificar a existência do contexto.

const AuthContext = React.createContext<User | undefined>(undefined);
function useAuth(): User {
  const ctx = useContext(AuthContext);
  if (!ctx) throw new Error('useAuth must be used within AuthProvider');
  return ctx;
}

Verificação rápida

Qual é o tipo correto para uma referência a um elemento de entrada HTML?

Recapitulação

Tipifique as propriedades do React com interfaces, useState com parâmetros de tipo, eventos com tipos de eventos do React, referências com genéricos de elementos DOM e forwardRef com parâmetros de tipo duplos. Os componentes genéricos permitem criar uma interface de usuário reutilizável e segura quanto aos tipos.

Perguntas Frequentes

A aula “Componentes genéricos e forwardRef” é grátis?

Sim — o texto completo de “Componentes genéricos e forwardRef” é 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 4 aulas no total.

O que vou aprender em “Componentes genéricos e forwardRef”?

Crie componentes tipados e reutilizáveis com genéricos 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 4 de 4.

Quanto tempo leva a aula “Componentes genéricos e forwardRef”?

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

Tipando propriedades de componentes React
Tipando useState e useReducer
Tipando useRef e manipuladores de eventos
Componentes genéricos e forwardRef

← Voltar para TypeScript Academy