Uno de los retos a los que me tuve que enfrentar cuando comenzaba a tipar mis componentes, fue entender cómo debía declarar los tipos de mis eventos. Algunos de estos eventos eran los onChange o los onSubmit o cualquier otro de entre los muchos eventos del DOM. Por eso hice hice este video: para enseñarte cómo utilizar algunos tipos útiles que React ya nos provee para usarlos en el día a día y así tener inferencias útiles de TypeScript. 💙

Así que, comencemos.

Eventos del DOM

Cuando se trabaja en el cliente con React, siempre es útil tener las inferencias que TS puede hacer dentro de nuestros “event handlers”. Como tú sabes, React sustituye los eventos nativos por otro llamado SyntheticEvent. Te dejo un link para que puedas leer más sobre esto, pero lo importante es que este objeto de React ¡se va a reutilizar para muchos eventos! 🤯

Por eso React nos ha puesto a la mano algunas herramientas para declarar los eventos correctamente, mira, comencemos con el más típico para ver el uso de la primera herramienta.

OnChange

  function handleChange(
	  event: React.ChangeEvent<HTMLInputElement> // <= aquí mero
  ) {
    setValue(event.currentTarget.value);
  }

  return (
    <>
      <input value={value} onChange={handleChange} />
      <p>Value: {value}</p>
    </>
  );

En este ejemplo estamos añadiendo un handler para el evento onChange. La sugerencia del equipo de React es utilizar React.ChangeEvent. Este tipo es capaz de recibir generics; esto significa que podemos pasar el tipo del elemento target: <HTMLInputElement>. Así tendremos una inferencia útil.

onSubmit

Para tipar nuestros eventos de formularios podremos emplear otra herramienta de React para mantener las inferencias de TypeScript correctas.

  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    set(
      (event.currentTarget.elements.namedItem("email") as HTMLInputElement)
        .value
    );
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="email" defaultValue={value} />
      <p>Value: {value}</p>
    </form>
  );

En este simple ejemplo, podemos ver que hemos empleado FormEvent, y que este tipo también es capaz de recibir generics. Así podemos especificar que el elemento que llega con target es un elemento form. ✅

Para cualquier otro evento puedes usar SyntheticEvent

Los dos tipos anteriores que hemos usado para este par de eventos, ambos heredan de SyntheticEvent; junto con una lista grande de otros tipos ya dispuestos para ser usados con los eventos más típicos y populares. Te dejo una lista de todos estos eventos para que tú misma vayas al código fuente y puedas leerlos y entenderlos mejor.

La intención de este contenido no es re-enlistar lo que el equipo de React ya hizo en sus docs.

La intención es mostrarte rápido dos cosas: cómo se usa y dónde encontrar información oficial para saber más. Al final del día la información ya está en internet. 🛜

👀 Debes tener cuidado con intentar acceder al objeto del evento de forma asíncrona, pues el evento no es persistente a menos que lo indiques con: e.peresist().

  setTimeout(() => {
    console.log(e.target.value); // ¡Esto no funcionará!
  }, 100);

Abrazo. Bliss. 🤓

Enlaces relacionados

React legacy docs

Todos los eventos