Pular para conteúdo

Exercícios: Aula 11 – TypeScript com Frontend Moderno ⚛️

🟢 Nível: Básico

  1. Props de Componente: Crie um componente Botao em React que receba as props label (string) e ativo (boolean).
  2. Estado Simples: Use o useState para criar um contador tipado que só aceite números.

🟡 Nível: Intermediário

  1. Eventos: Tipar o evento de um formulário (React.FormEvent) em uma função handleSubmit.
  2. useRef Tipado: Crie um formulário onde um botão "Focar" use um useRef para dar foco a um input de texto.

🔴 Nível: Desafio

5. Context API: Crie um contexto para gerenciar as informações do usuário logado. Defina uma interface para o contexto e garanta que o provedor seja tipado corretamente.

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Props de Componente **Resolução e Implementação:** 
// Estrutura de implementação recomendada para Props de Componente
// Validação de regras de negócio e retorno consistente
- **Explicação:** A solução atende diretamente aos requisitos de **TypeScript com Frontend Moderno ⚛️**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 2: Estado Simples **Resposta Comentada:** - **Fundamentação:** No contexto de **TypeScript com Frontend Moderno ⚛️**, o conceito abordado (Estado Simples) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Eventos **Resolução e Implementação:** 
// Estrutura de implementação recomendada para Eventos
// Validação de regras de negócio e retorno consistente
- **Explicação:** A solução atende diretamente aos requisitos de **TypeScript com Frontend Moderno ⚛️**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 4: useRef Tipado **Resolução e Implementação:** 
// Estrutura de implementação recomendada para useRef Tipado
// Validação de regras de negócio e retorno consistente
- **Explicação:** A solução atende diretamente aos requisitos de **TypeScript com Frontend Moderno ⚛️**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 5: Context API **Resolução e Implementação:** 
// Estrutura de implementação recomendada para Context API
// Validação de regras de negócio e retorno consistente
- **Explicação:** A solução atende diretamente aos requisitos de **TypeScript com Frontend Moderno ⚛️**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda.