Tipando a validação do formulário: o desafio final
No curso de JavaScript, você escreveu a lógica de validarFormulario sozinho. Aqui, a mesma função ganha interfaces nos dois lados: o que ela recebe e o que ela devolve.
Estudar esta lição interativa →Sua página de perfil nasceu no HTML, ganhou estilo no CSS, ganhou comportamento no JavaScript, e agora, com este módulo, ganha tipos: um tema com exatamente duas opções válidas, sem espaço para erro de digitação. Para fechar o curso inteiro, um último desafio, que é a versão tipada de um exercício que você talvez já conheça: a validação do formulário de contato.
No curso de JavaScript, validarFormulario(dados) recebia um objeto solto { nome, email, mensagem } e devolvia { ok, erros }, sem nenhuma garantia formal desses dois formatos. Aqui, cada um vira uma interface nomeada, do jeito que você aprendeu no Módulo 5: DadosContato { nome: string; email: string; mensagem: string } descreve exatamente o que entra, e ResultadoValidacao { ok: boolean; erros: string[] } descreve exatamente o que sai, incluindo o tipo do array de erros. As duas já vêm declaradas no editor do exercício abaixo, para você ver os dois lados do contrato; o seu trabalho é escrever a lógica da função, que precisa respeitar esses tipos.
É a mesma diferença de sempre entre um formulário solto e um formulário oficial (Módulo 5): antes, qualquer função que recebesse "algo parecido com dados de contato" precisava confiar, de olho fechado, que o formato estava certo. Com DadosContato e ResultadoValidacao nomeados, qualquer função nova que interagir com essa parte do sistema, inclusive uma escrita por outra pessoa do time, meses depois, sabe exatamente o que esperar dos dois lados.
validarFormulario(dados: DadosContato): ResultadoValidacao: um erro (texto) para cada campo vazio em nome, email e mensagem (depois de .trim()), e ok deve ser true somente quando não houver nenhum erro.interface DadosContato {
nome: string;
email: string;
mensagem: string;
}
interface ResultadoValidacao {
ok: boolean;
erros: string[];
}
function validarFormulario(dados: DadosContato): ResultadoValidacao {
const erros: string[] = [];
// sua vez: para cada um dos três campos, se estiver vazio (depois de trim),
// adicione uma mensagem em erros com erros.push("...")
return { ok: erros.length === 0, erros: erros };
}
🧩 Este é um exercício com correção automática — abra no app para completá-lo e verificar.
Parabéns por chegar até aqui: sua página de perfil já passou por quatro cursos inteiros de evolução, a estrutura no HTML, a aparência no CSS, o comportamento no JavaScript, e agora a segurança de tipos no TypeScript. Cada camada resolveu um problema diferente, e nenhuma delas precisou refazer o trabalho da anterior. É exatamente assim que um projeto de verdade cresce.
1. Rode o TypeScript no seu computador. Em uma pasta de projeto, npm i -D typescript e depois npx tsc --init criam a configuração; a opção strict é a que liga as checagens que você praticou aqui. Com um editor como o Visual Studio Code, os erros aparecem sublinhados enquanto você digita. 2. Tipe um projeto seu. Pegue um dos seis projetos do curso de JavaScript Projetos (a lista de compras e o dashboard de despesas são ótimos), leve o JavaScript do <script> para um arquivo próprio e renomeie-o para .ts: o diagnóstico vai apontar o que antes passava batido. 3. Leia a documentação. O Handbook do TypeScript, em typescriptlang.org, aprofunda tudo o que você viu (genéricos, tipos condicionais, mapeados) e é a referência oficial para consultar sempre que bater uma dúvida.