0Pricing
Frontend Academy · Aula

TypeScript com React: genéricos, FC e hooks

Tipar componentes React com propriedades genéricas, anotar useState e useRef com tipos explícitos e tipar hooks personalizados que devolvem tuplos.

TypeScript com React: genéricos, FC e hooks é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 3 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 Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

Tipagem de componentes

React moderno: tipar propriedades com uma interface e usar uma função comum. React.FC existe, mas não é mais recomendado (adiciona filhos implicitamente e não oferece suporte a genéricos).

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

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

Tipagem de filhos

Use React.ReactNode para qualquer filho renderizável.

interface CardProps {
  title: string;
  children: React.ReactNode;
}

function Card({ title, children }: CardProps) {
  return (
    <div className="card">
      <h2>{title}</h2>
      {children}
    </div>
  );
}

Tipagem de useState

useState geralmente infere o tipo a partir do valor inicial. Forneça um tipo explícito quando o valor inicial for nulo ou não representar todo o tipo possível.

const [count, setCount] = useState(0);              // number
const [name, setName] = useState('');                // string

const [user, setUser] = useState<User | null>(null); // explicit
const [items, setItems] = useState<Item[]>([]);      // explicit array type

Tipagem de useRef

Há duas formas: uma referência a um elemento do DOM (inicializada como nula) ou um contêiner mutável.

const inputRef = useRef<HTMLInputElement>(null);
const timerRef = useRef<number | null>(null);

useEffect(() => {
  inputRef.current?.focus();
  timerRef.current = window.setInterval(tick, 1000);
  return () => clearInterval(timerRef.current!);
}, []);

Tipagem de manipuladores de eventos

Use os tipos de eventos sintéticos do React.

function Form() {
  function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
  }
  function onChange(e: React.ChangeEvent<HTMLInputElement>) {
    setValue(e.target.value);
  }
  function onClick(e: React.MouseEvent<HTMLButtonElement>) {
    /* ... */
  }
  return <form onSubmit={onSubmit}>...</form>;
}

Componentes genéricos

Os componentes podem ser genéricos — o TypeScript infere o parâmetro de tipo a partir do local da chamada.

interface ListProps<T> {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
  keyOf: (item: T) => string | number;
}

function List<T>({ items, renderItem, keyOf }: ListProps<T>) {
  return <ul>{items.map(i => <li key={keyOf(i)}>{renderItem(i)}</li>)}</ul>;
}

<List<User>
  items={users}
  renderItem={u => u.name}
  keyOf={u => u.id}
/>

Tipagem de hooks personalizados

Hooks personalizados são funções — tipem-nos como qualquer outra função. Tuplas de retorno precisam de uma anotação explícita para evitar o alargamento para um vetor.

function useToggle(initial = false): [boolean, () => void] {
  const [value, setValue] = useState(initial);
  const toggle = () => setValue(v => !v);
  return [value, toggle]; // tuple — annotation makes this stable
}

const [isOpen, toggle] = useToggle();

Tipagem de contexto

createContext precisa de um valor inicial do mesmo tipo que o valor que você fornecerá. Use uma asserção de não nulo ou um objeto padrão.

interface AuthContextValue {
  user: User | null;
  signIn: (email: string, pw: string) => Promise<void>;
  signOut: () => void;
}

const AuthContext = createContext<AuthContextValue | null>(null);

export function useAuth() {
  const ctx = useContext(AuthContext);
  if (!ctx) throw new Error('useAuth must be inside AuthProvider');
  return ctx;
}

Tipagem de useReducer

Especifique explicitamente o tipo do estado e a união de ações.

type State = { count: number };
type Action =
  | { type: 'increment' }
  | { type: 'decrement' }
  | { type: 'set'; value: number };

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'increment': return { count: state.count + 1 };
    case 'decrement': return { count: state.count - 1 };
    case 'set':       return { count: action.value };
  }
}

const [state, dispatch] = useReducer(reducer, { count: 0 });

Evitando React.FC

React.FC deixou de ser recomendado: adiciona filhos implicitamente, não oferece bom suporte a componentes genéricos e limita algumas otimizações. Prefira componentes de função comuns com propriedades tipadas.

Utilitário ComponentPropsWithoutRef

Para herdar as propriedades de um elemento nativo (estendendo um botão ou campo de entrada), use ComponentPropsWithoutRef.

type ButtonProps = React.ComponentPropsWithoutRef<'button'> & {
  variant?: 'primary' | 'secondary';
};

function Button({ variant = 'primary', ...rest }: ButtonProps) {
  return <button className={`btn ${variant}`} {...rest} />;
}

Verificação rápida

Por que geralmente se desencoraja o uso de React.FC em favor de componentes de função tipados simples?

Recapitulação: TypeScript + React

Tipifique as propriedades com interfaces e prefira funções simples a React.FC. children: React.ReactNode. useState geralmente infere os tipos; faça uma anotação para valores nulos ou matrizes vazias. Use useRef para elementos do DOM. Use tipos de eventos do React para os manipuladores. Use componentes genéricos para listas e formulários reutilizáveis. O retorno em tupla de ganchos personalizados precisa de uma anotação. Use ComponentPropsWithoutRef para estender elementos nativos.

Perguntas Frequentes

A aula “TypeScript com React: genéricos, FC e hooks” é grátis?

Sim — o texto completo de “TypeScript com React: genéricos, FC e hooks” é 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 Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “TypeScript com React: genéricos, FC e hooks”?

Tipar componentes React com propriedades genéricas, anotar useState e useRef com tipos explícitos e tipar hooks personalizados que devolvem tuplos. Você pratica Frontend 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 Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend 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 4.

Quanto tempo leva a aula “TypeScript com React: genéricos, FC e hooks”?

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 Frontend Academy?

Sim. Cada aula de Frontend 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

  1. Tipos de literais de modelo
  2. Decoradores e metadados
  3. TypeScript com React: genéricos, FC e hooks
  4. Modo estrito e eliminação de any
← Voltar para Frontend Academy