2b:["$","div","2",{"className":"flex items-center gap-4","children":[["$","div",null,{"className":"flex items-center justify-center w-8 h-8 bg-lime-500 text-black rounded-full font-semibold","children":3}],["$","div",null,{"className":"text-gray-300","children":["$","div",null,{"dangerouslySetInnerHTML":{"__html":"Tipar o evento onChange — Use React.ChangeEvent<HTMLInputElement> pra cada input. Select e textarea têm tipos próprios."}}]}]]}] 2c:["$","div","3",{"className":"flex items-center gap-4","children":[["$","div",null,{"className":"flex items-center justify-center w-8 h-8 bg-lime-500 text-black rounded-full font-semibold","children":4}],["$","div",null,{"className":"text-gray-300","children":["$","div",null,{"dangerouslySetInnerHTML":{"__html":"Tipar o evento onSubmit — Use React.FormEvent<HTMLFormElement> e chame e.preventDefault() com segurança total."}}]}]]}] 2d:["$","div","4",{"className":"flex items-center gap-4","children":[["$","div",null,{"className":"flex items-center justify-center w-8 h-8 bg-lime-500 text-black rounded-full font-semibold","children":5}],["$","div",null,{"className":"text-gray-300","children":["$","div",null,{"dangerouslySetInnerHTML":{"__html":"Conectar com a API — O dado que sai do form já tá tipado. Passe direto pro fetch ou axios sem cast manual."}}]}]]}] 3a:T455,

interface FormData {
  name: string;
  email: string;
  age: number;
}

function SignupForm() {
  const [form, setForm] = useState<FormData>({
    name: "",
    email: "",
    age: 0,
  });

  const handleChange = (
    e: React.ChangeEvent<HTMLInputElement>
  ) => {
    const { name, value, type } = e.target;
    setForm((prev) => ({
      ...prev,
      [name]: type === "number" ? Number(value) : value,
    }));
  };

  const handleSubmit = (
    e: React.FormEvent<HTMLFormElement>
  ) => {
    e.preventDefault();
    // form já está tipado como FormData
    console.log(form.name, form.email, form.age);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" onChange={handleChange} />
      <input name="email" onChange={handleChange} />
      <input name="age" type="number" onChange={handleChange} />
      <button type="submit">Cadastrar</button>
    </form>
  );
}

2e:["$","section","3",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"Exemplo prático: formulário de cadastro tipado"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Veja como fica um formulário de cadastro com todos os tipos definidos. Repare que o TypeScript reclama na hora se você tentar acessar um campo que não existe na interface."}],["$","div","1",{"dangerouslySetInnerHTML":{"__html":"$3a"}}],["$","p","2",{"className":"text-gray-300 leading-relaxed mb-6","children":"O ponto forte aqui: se você trocar o nome de um campo na interface, o TypeScript vai apontar todos os lugares que precisam de ajuste. Zero surpresa em runtime."}]]]}] 2f:["$","section","4",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"Tipando select, textarea e campos dinâmicos"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Inputs de texto usam ChangeEvent, mas select e textarea pedem tipos diferentes. Misturar gera aquele erro clássico que ninguém entende de primeira."}],["$","div","1",{"dangerouslySetInnerHTML":{"__html":"

// Select\nconst handleSelect = (\n  e: React.ChangeEvent<HTMLSelectElement>\n) => {\n  setForm((prev) => ({ ...prev, role: e.target.value }));\n};\n\n// Textarea\nconst handleTextarea = (\n  e: React.Chang