TypeScript com React
Tipos para props, state, events, generics, FC type, children type, tipagem de hooks
1Qual é a sintaxe correta para tipar as props de um componente React?
Qual é a sintaxe correta para tipar as props de um componente React?
Resposta
A interface Props seguida da tipagem da função com Props como parâmetro é a sintaxe padrão recomendada. Esta abordagem oferece excelente inferência de tipos e permite reutilizar facilmente o tipo Props em outras partes do código. É mais explícita que React.FC e oferece melhor controle sobre a tipagem de children.
2Como tipar corretamente um state simples com useState?
Como tipar corretamente um state simples com useState?
Resposta
TypeScript infere automaticamente o tipo do state a partir do valor inicial passado ao useState. Para um valor simples como uma string, não é necessário especificar explicitamente o tipo genérico. A inferência automática é suficiente e torna o código mais conciso. A tipagem explícita torna-se útil apenas para uniões ou quando o valor inicial é null.
3Qual é o tipo correto para um evento onClick em um botão?
Qual é o tipo correto para um evento onClick em um botão?
Resposta
React.MouseEvent<HTMLButtonElement> é o tipo específico para eventos de clique em um botão. O parâmetro genérico HTMLButtonElement especifica o elemento DOM envolvido, o que permite acessar propriedades específicas do botão via event.currentTarget. Usar MouseEvent do DOM nativo ou um tipo muito genérico perderia essa precisão de tipagem.
Qual tipo usar para tipar os children de um componente wrapper?
Qual é a principal diferença entre React.FC e a tipagem direta?
+17 perguntas de entrevista
Outros temas de entrevista React / Next.js
Fundamentos de JavaScript
Fundamentos do React
React Hooks
Ciclo de vida dos componentes
React Router
Gerenciamento de estado com Context
Formulários e Controlled Components
Busca de dados e API
React Query (TanStack Query)
Styling & CSS-in-JS
Fundamentos do Next.js
Data Fetching no Next.js
Server Actions do Next.js
Roteamento e Navegação no Next.js
API Routes do Next.js
Metadata & SEO no Next.js
Middleware e Auth no Next.js
Testes em React
Zustand State Management
Otimização de Performance React
Error Boundaries & Error Handling
Advanced React Patterns
Recursos avançados do Next.js
Deploy e Produção com Next.js
Architecture & Design Patterns
React Server Components
Internacionalização do Next.js
React Security & Boas Práticas
Domine React / Next.js para sua proxima entrevista
Acesse todas as perguntas, flashcards, testes tecnicos, exercicios de code review e simuladores de entrevista.
Comece gratis