Especialização Frontend com React & TypeScript • Demonstrações Práticas Executáveis

🎯 Contexto e Objetivo Prático

Integração do React Hook Form com Zod Resolver, tipagem estática inferida e regras de refinamento entre múltiplos campos.

💻 Código Fonte React 19 (TSX)

// UserRegisterSchema.ts
import { z } from "zod";

export const RegisterUserSchema = z
  .object({
    username: z.string().min(4, "Nome de usuário deve ter pelo menos 4 caracteres"),
    email: z.string().email("Formato de email corporativo inválido"),
    password: z.string().min(8, "Senha deve ter no mínimo 8 caracteres"),
    confirmPassword: z.string().min(1, "Confirmação de senha é obrigatória"),
    age: z.coerce.number().min(18, "O colaborador deve ser maior de 18 anos")
  })
  .refine(data => data.password === data.confirmPassword, {
    message: "As senhas não coincidem",
    path: ["confirmPassword"]
  });

export type RegisterUserInput = z.infer<typeof RegisterUserSchema>;

// No Componente React (com @hookform/resolvers/zod):
/*
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";

export function RegisterUserForm() {
  const { register, handleSubmit, formState: { errors } } = useForm<RegisterUserInput>({
    resolver: zodResolver(RegisterUserSchema)
  });
  // Validação em runtime automática sincronizada com o tipo TS!
}
*/

🖥️ Saída de Renderização Visual e Comportamento

[Validação Zod Integrada]
Entrada: { password: "segredo123", confirmPassword: "outro" }
Erro Gerado no Path confirmPassword: "As senhas não coincidem"
Tipo TypeScript garantido: RegisterUserInput