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.

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.