Si tú también quieres mejorar al escribir tu código, invertir menos tiempo en «debugging» y más en creación, bueno entonces, seguro ya estás tipando tus componentes de React con Typescript.

Si no, checa esta entrada, te va a servir.

Bueno, yo también uso TS y me encanta, sí, es duro al principio, pero una vez que vas obteniendo los beneficios de escribir con TS, te libera de invertir horas en buscar bugs. Puedes ver la salud de un archivo entero solo de echándole un vistazo, gracias a TS.

Por eso quiero compartirte, 3 maneras simples y útiles en las que yo hago el tipado de eventos que ocupo más frecuentemente, para que tú, sigas tipando tus componentes y practicando TS:

#1 Tipando en evento onChange

El mejor tipo para un evento onChange, viene directamente de React. Lo mejor es que es un «generic» para decirle cuál es el tipo del «currentTarget».

      <input
        name='name'
        type='text'
        onChange={(evnt: React.ChangeEvent<HTMLInputElement>) => {
          console.log(evnt.currentTarget); // esto es seguro, gracias al generic
        }}
      />

También puedes importar solamente el ChangeEvent type, independiente de React.

#2 Tipando un evento onSubmit

Para un evento de formulario, también es importante que el atributo currentTarget esté presente en el tipo, lo podemos lograr así:

       <form
        onSubmit={(evnt: React.FormEvent<HTMLFormElement>) => {
          console.log(evnt.currentTarget);
        }}
      >
        <input type='text' />
      </form>

Nos es importante el currentTarget porque es la manera correcta sobre target (checa) y también porque dentro de currentTarget está nuestro FormData.

#3 Tipando un evento onClick

      <button
        onClick={(evnt: React.MouseEvent<HTMLButtonElement>) => {
          console.log(evnt.currentTarget);
        }}
      >
        Presioname 🫠
      </button>

Siendo específicos con el tipo de evento que se va a usar, nos permite usar los atributos y métodos con confianza, como clientY en el caso del MouseEvent, manteniendo saludable nuestra linterna. 🔦

Las últimas versiones de React ya vienen con muchos tipos superútiles para trabajar con TS

Puedes explorar la documentación relacionada con TS y React, aquí.

Espero estos tipados rápidos te sean útiles mientras los aprendes de memoria. 🚀 🤓

Abrazo. Bliss.

Fuente: https://github.com/palantir/blueprint/issues/3372