Quais são os tipos de evento de TypeScript em React JS

Neste artigo você aprenderá quais são os tipos de evento de TypeScript em React, e também como utilizá-los corretamente

Fala programador(a), beleza? Bora aprender mais sobre React JS!

Com o aumento da popularidade do TypeScript no desenvolvimento de aplicações React, tornou-se essencial entender como os tipos funcionam, especialmente quando lidamos com eventos.

Os eventos, sejam eles relacionados ao mouse, teclado, formulário ou qualquer outra interação do usuário, são uma parte fundamental de qualquer aplicação React.

Neste artigo, exploraremos os diferentes tipos de evento no React com TypeScript e aprenderemos como usá-los corretamente para criar aplicações mais robustas e seguras.

Entendendo os Eventos em React

Em React, os eventos são nomeados usando camelCase, em vez de letras minúsculas. E com TypeScript, eles têm suas próprias definições de tipo.

Exemplo básico em React (sem TypeScript):

function Botao() {
  function handleClick(e) {
    e.preventDefault();
    console.log('Botão foi clicado.');
  }

  return (
    <button onClick={handleClick}>
      Clique Aqui
    </button>
  );
}

Adicionando TypeScript ao Mix

Quando começamos a usar TypeScript, precisamos definir os tipos dos eventos para garantir a correção do código.

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Eventos de Mouse

Os eventos de mouse são provavelmente os mais comuns. Você pode ter que lidar com onClick, onMouseDown, onMouseMove, onMouseUp, etc.

Exemplo com TypeScript:

import React from 'react';

function Botao() {
  function handleClick(e: React.MouseEvent<HTMLButtonElement>) {
    e.preventDefault();
    console.log('Botão foi clicado.');
  }

  return (
    <button onClick={handleClick}>
      Clique Aqui
    </button>
  );
}

Aqui, especificamos que e é um evento de mouse e esperamos que ele ocorra em um elemento de botão.

Eventos de Teclado

Outro conjunto comum de eventos são os relacionados ao teclado, como onKeyDown, onKeyPress, ou onKeyUp.

import React from 'react';

function InputTeclado() {
  function handleKeyPress(e: React.KeyboardEvent<HTMLInputElement>) {
    console.log(`Tecla pressionada: ${e.key}`);
  }

  return (
    <input onKeyPress={handleKeyPress} />
  );
}

Eventos de Formulário

Quando se trata de formulários, você pode lidar com eventos como onChange, onSubmit, e onInput.

import React, { useState } from 'react';

function Formulario() {
  const [nome, setNome] = useState('');

  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    setNome(e.target.value);
  }

  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    console.log(`Formulário enviado com: ${nome}`);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={nome} onChange={handleChange} />
      <button type="submit">Enviar</button>
    </form>
  );
}

Eventos de Foco

Os eventos de foco, como onFocus e onBlur, também são bastante comuns, especialmente quando você está tentando melhorar a experiência do usuário.

import React from 'react';

function InputFoco() {
  function handleFocus(e: React.FocusEvent<HTMLInputElement>) {
    console.log('Campo focado!');
  }

  return (
    <input onFocus={handleFocus} />
  );
}

Por que Tipar Eventos é Importante?

1. Melhoria da Segurança do Tipo: Evita-se muitos erros em tempo de execução garantindo que as funções manipuladoras estejam recebendo o tipo correto de evento.
2. Desenvolvimento Mais Rápido: Com o autocompletar e as dicas de tipo do TypeScript, você pode ver rapidamente quais propriedades e métodos estão disponíveis para um evento.
3. Documentação Automática: Ao olhar para a função manipuladora, você sabe imediatamente que tipo de evento ela espera e em que tipo de elemento esse evento deve ocorrer.

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Os eventos são uma parte crucial de qualquer aplicação React, e com a adição do TypeScript, temos uma ferramenta poderosa para tornar o manuseio desses eventos mais seguro e eficiente.

Ao tipar adequadamente os eventos, não apenas evitamos possíveis erros, como também tornamos o processo de desenvolvimento mais fluido e intuitivo.

Se você ainda não está usando TypeScript em seus projetos React, espero que este artigo tenha lhe dado um bom motivo para começar!

Está buscando em evoluir como Programador? Confira o nossos cursos de programação.

Tabela rápida: qual tipo usar em cada evento:

Se você caiu aqui só pra pegar o tipo certo e voltar pro código, se liga nessa lista 😀

onClick, onMouseDown, onMouseMove, onMouseUp: React.MouseEvent<Elemento>

onKeyDown, onKeyPress, onKeyUp: React.KeyboardEvent<Elemento>

onChange, onInput: React.ChangeEvent<Elemento>

onSubmit: React.FormEvent<Elemento>

onFocus, onBlur: React.FocusEvent<Elemento>

E o que é esse Elemento entre < >?

É o elemento HTML onde o evento acontece, tipo HTMLButtonElement pro botão, HTMLInputElement pro input e HTMLFormElement pro form

É justamente ele que faz o TypeScript saber o que existe lá dentro, por isso o e.target.value funciona bonitinho num ChangeEvent<HTMLInputElement>

Agora bora ver cada grupo na prática

Um caso bem comum é querer reagir só a uma tecla específica, tipo o Enter da busca

O tipo é o mesmo, o que muda é o que você faz com o e.key

import React from ‘react’;

function BuscaComEnter() { function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) { if (e.key === ‘Enter’) { console.log(‘Enter pressionado, bora buscar!’) } }

return ( <input onKeyDown={handleKeyDown} /> ); }

Repare que o tipo React.KeyboardEvent<HTMLInputElement> vale pra qualquer handler de teclado nesse input, não importa se é onKeyDown ou onKeyUp

Como descobrir o tipo do evento sem decorar nada:

Ninguém guarda esses nomes na cabeça, beleza? e nem precisa

Tem um truque que resolve pra qualquer evento, inclusive os que não estão nessa lista:

1. escreva o handler direto na prop, numa arrow function inline

2. o TypeScript já sabe qual prop é aquela e em qual elemento você colocou, então ele infere o tipo do parâmetro sozinho

3. passa o mouse por cima do parâmetro no seu editor e ele te mostra o tipo completo, com o elemento e tudo

4. copia esse tipo pra função nomeada e pronto, seu handler continua tipado do jeito certo

É tipo pedir a resposta pro próprio compilador em vez de sair pesquisando

Faça o teste no seu projeto, leva uns 10 segundos!

Erros comuns na hora de tipar eventos:

Tome cuidado com estes três, são os que mais aparecem:

Esquecer o elemento entre < >: se você não diz em qual elemento o evento acontece, o TypeScript não tem como saber que ali dentro existe um value, e o e.target.value passa a reclamar

Usar o tipo errado pro handler: o onSubmit do formulário espera um evento de formulário, não um evento de mouse, mesmo que quem disparou tenha sido o clique no botão

Tipo certo, elemento errado: declarar HTMLButtonElement e plugar o handler em outro elemento é o clássico que só aparece depois, quando você mexe no JSX e esquece do tipo lá em cima

Já me ferrei com o último mais de uma vez, o código compila na sua cabeça e não no editor haha

Perguntas frequentes sobre tipos de evento no React com TypeScript:

Qual o tipo do evento de clique?

É React.MouseEvent, com o elemento entre < >, tipo React.MouseEvent<HTMLButtonElement> quando o clique é num botão

Como tipar o onChange de um input?

Use React.ChangeEvent<HTMLInputElement>, que é o tipo que te dá acesso ao e.target.value já tipado

Qual a diferença entre ChangeEvent e FormEvent?

O ChangeEvent é do campo que mudou, então ele fala do input

O FormEvent é do formulário inteiro, é o que você usa no onSubmit pra dar o e.preventDefault() antes de enviar

Preciso instalar algo pra usar esses tipos?

Nos exemplos deste artigo eles são acessados a partir do próprio React que já foi importado, escrevendo React.MouseEvent, React.ChangeEvent e por aí vai

Posso deixar o TypeScript inferir em vez de tipar na mão?

Pode, quando o handler está escrito inline na prop ele já vem tipado sozinho

O tipo explícito compensa quando a função é nomeada e fica longe do JSX, aí ninguém precisa adivinhar o que entra ali