0Pricing
React Academy · Aula

Tipando eventos e referências no TypeScript

Use os genéricos React.ChangeEvent, React.MouseEvent e RefObject para interações com o DOM.

Tipando eventos e referências no TypeScript é uma aula grátis de React Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.

Eventos sintéticos do React

O React encapsula eventos nativos do DOM em SyntheticEvent. Cada tipo de evento tem um genérico específico: React.ChangeEvent<HTMLInputElement>, React.MouseEvent<HTMLButtonElement> etc.

Definindo o tipo de onChange

O evento mais comum é onChange em campos de entrada. Defina o tipo do manipulador usando React.ChangeEvent<HTMLInputElement>.

function SearchInput() {
  const [value, setValue] = useState('');

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value);
  };

  return <input value={value} onChange={handleChange} />;
}

Definindo o tipo de onClick

Os cliques em botões usam React.MouseEvent<HTMLButtonElement>. Acesse e.currentTarget, e.preventDefault() e e.stopPropagation() com tipagem completa.

function DeleteButton({ onDelete }: { onDelete: () => void }) {
  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.stopPropagation();
    onDelete();
  };
  return <button onClick={handleClick}>Delete</button>;
}

Definindo o tipo de onSubmit

O envio de formulários usa React.FormEvent<HTMLFormElement>. Sempre chame e.preventDefault() para impedir a navegação padrão do navegador.

function LoginForm() {
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const form = e.currentTarget;
    const email = (form.elements.namedItem('email') as HTMLInputElement).value;
    console.log(email);
  };
  return (
    <form onSubmit={handleSubmit}>
      <input name="email" />
      <button type="submit">Login</button>
    </form>
  );
}

Definindo o tipo de eventos de teclado

Use React.KeyboardEvent<HTMLElement> para definir o tipo dos manipuladores de teclado. Acesse e.key, e.code e e.ctrlKey com segurança.

function CommandInput() {
  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter' && e.metaKey) {
      submitCommand();
    }
  };
  return <input onKeyDown={handleKeyDown} />;
}

useRef para elementos DOM

Passe o tipo do elemento HTML como genérico para useRef e inicialize-o com null. Assim, o TypeScript sabe que a referência contém esse tipo de elemento.

function AutoFocusInput() {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    inputRef.current?.focus();
  }, []);

  return <input ref={inputRef} />;
}

Referência mutável vs. referência DOM

Ao armazenar um valor mutável, e não um nó DOM, inicialize useRef com um valor em vez de null. O TypeScript infere uma MutableRefObject mutável.

// DOM ref (read-only current)
const divRef = useRef<HTMLDivElement>(null);

// Mutable ref (read-write current)
const countRef = useRef<number>(0);
countRef.current += 1; // ✓ no TypeScript error

Definindo o tipo de useImperativeHandle

Ao expor uma API de referência de um componente filho, defina uma interface para o identificador e use-a tanto em forwardRef quanto em useImperativeHandle.

interface DialogHandle {
  open: () => void;
  close: () => void;
}

const Dialog = forwardRef<DialogHandle, { title: string }>((props, ref) => {
  useImperativeHandle(ref, () => ({
    open: () => console.log('open'),
    close: () => console.log('close'),
  }));
  return <div>{props.title}</div>;
});

Funções de retorno de referências

Uma função de retorno de referência recebe o elemento DOM ou null. Defina seu tipo como (node: HTMLElement | null) => void.

function MeasureDiv() {
  const [height, setHeight] = useState(0);

  const measuredRef = (node: HTMLDivElement | null) => {
    if (node) setHeight(node.getBoundingClientRect().height);
  };

  return <div ref={measuredRef}>Content: {height}px tall</div>;
}

Elemento de evento vs. elemento atual

e.target é o elemento que acionou o evento; e.currentTarget é o elemento ao qual o manipulador está associado. Converta o tipo de e.target quando precisar de propriedades específicas.

const handleClick = (e: React.MouseEvent<HTMLUListElement>) => {
  const target = e.target as HTMLLIElement;
  console.log(target.dataset.id);
};

Tipo genérico de manipulador de eventos

Para escrever funções reutilizáveis de manipulação de eventos, use o genérico React.EventHandler<Event> ou escreva a assinatura completa da função diretamente.

type InputChangeHandler = React.ChangeEventHandler<HTMLInputElement>;

const logChange: InputChangeHandler = (e) => {
  console.log(e.target.value); // e is fully typed
};

Verificação rápida

Qual tipo do TypeScript você deve usar para um useRef que contém um HTMLInputElement?

Recapitulação

Defina os tipos dos manipuladores de eventos com os genéricos React.ChangeEvent, React.MouseEvent e React.FormEvent. Defina referências DOM com useRef<HTMLElement>(null) e referências mutáveis com o tipo do valor. Use forwardRef com uma interface de identificador explícita para APIs imperativas.

Perguntas Frequentes

A aula “Tipando eventos e referências no TypeScript” é grátis?

Sim — o texto completo de “Tipando eventos e referências no TypeScript” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.

O que vou aprender em “Tipando eventos e referências no TypeScript”?

Use os genéricos React.ChangeEvent, React.MouseEvent e RefObject para interações com o DOM. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar React Academy?

Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Tipando eventos e referências no TypeScript”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de React Academy?

Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Tipando propriedades e tipos de retorno de componentes
  2. Tipando eventos e referências no TypeScript
  3. Componentes genéricos e tipos utilitários
  4. Tipando contextos e hooks personalizados
← Voltar para React Academy