Tipos para eventos y callbacks de escuchadores

cheatsheet de tipos con ts https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/class_components

Tipos para eventos y callbacks de escuchadores

A medida que desarrollamos aplicaciones en TypeScript, una de las tareas más importantes es asegurarnos de que estamos trabajando con tipos de datos precisos y seguros. Esto es particularmente importante cuando trabajamos con eventos y callbacks de escuchadores en React, ya que necesitamos especificar el tipo de evento que se está produciendo.

Afortunadamente, muchas librerías y frameworks modernos ya proporcionan tipos de datos precisos y completos para eventos. Esto significa que podemos confiar en que las funciones que estamos utilizando son seguras y precisas.

Para asegurarnos de que estamos utilizando los tipos de datos correctos para eventos, necesitamos asegurarnos de que nuestra configuración de TypeScript incluya las librerías que estamos utilizando. Podemos hacer esto especificando las librerías que estamos usando en nuestro archivo tsconfig.json.

{
  "compilerOptions": {
    ...
    **"lib": ["DOM", "DOM.Iterable", "ESNext"]**, // especificamos las librerías que usamos
    ...
  },
  ...
}

Una vez que hemos configurado nuestro proyecto correctamente, podemos inspeccionar los tipos de eventos utilizando el editor de código que estemos utilizando. Por ejemplo, si queremos saber el tipo de datos que se produce en un evento onClick de un botón, podemos simplemente hacer hover sobre el método onClick y buscar su definición.

El editor de código nos mostrará la definición del método onClick, junto con información sobre su tipo de datos:

En este caso, el tipo de datos del evento es React.MouseEvent<HTMLButtonElement>. Esto significa que podemos utilizar este tipo de datos para especificar el tipo de datos que se produce en nuestro callback de escuchador de eventos.

Por ejemplo, podemos definir una función addNewFox que se llama cuando se hace clic en un botón. Para especificar el tipo de datos del evento que se produce, podemos incluir React.MouseEvent<HTMLButtonElement> como argumento de nuestra función:

function App(): JSX.Element {
  const addNewFox = (**event: React.MouseEvent<HTMLButtonElement>**): void => {
    event.preventDefault()
    const target = event.target

    // ...
  }

  return (
    // JSX del componente App...
  )
}

En este ejemplo, la función addNewFox toma un argumento de tipo React.MouseEvent<HTMLButtonElement>. Esto nos permite acceder a las propiedades del evento de manera segura y precisa, sin tener que utilizar tipos de datos genéricos como any.

También, podemos hacer la importación de los tipos de manera directa:

// importación del tipo desde React
import type { MouseEvent } from "react"

function App(): JSX.Element {
  // Evitamos escribir de donde viene "React"
	const addNewFox = (event: MouseEvent<HTMLButtonElement>): void => {
    event.preventDefault()
    const target = event.target

    // ...
  }

  return (
    // JSX del componente App...
  )
}

Esto dependerá bastante de la librería que estemos usando junto con React.

Excelente… lo mejor hasta el momento

Forma no profesional.

Usar any y un tipo void.

const evento = (event: { preventDefault: () => void, target: any } ) => {
	event.preventDefault();

	const target = event.target;
}

Forma profesional.

Para añadir tipado de forma mas profesional es recomendable leer la definición de la creación de tipos del fabricante de la tecnología, en este caso React. ¿Cómo hacer eso? Pues bien, se pone el mouse encima (hover) sobre el evento, a continuación aprietas la tecla ctrl y clic o tambien dando clic derecho y luego en ir a deficinión; con base en ello se puede leer la documentación al respecto para aprender a tipar.
.
Un ejemplo de un botón onClick para generar una acción sería la siguiente donde el tipado va asignado a la constante y entre el simbolo (<>) va el elemento HTML al que se le escucha el evento.

const evento: MouseEventHandler<HTMLButtonElement> = () => {
	// code
}

Excelente clase, anteriormente cuando no sabía el tipo de datos que llevaba algo, simplemente ponía que era de tipo any pero ya se como manejarlo mejor y poner el tipo de dato adecuado

Resumen: No hagan tipos en vano, es muy seguro que ya existan

Esta clase es oro puro 🪙

TypeScript cada día me enamora más

Genial esta clase, uan de las mejores 💚

Que buen curso Jonathan!! Es super poderoso esa técnica para ver todos los tipos correctos desde el core de las librerias que usemos o el core de React como en clases pasadas.

Yo creo que ingenuo es mejor traducción de naive que inocente.
El contexto es que cuando aplicas un algoritmo siempre te muestran la versión naive, que no es la mejor pero es evidente y funciona.

Estoy usando la v13.5.1 de Next y ya no es necesario importar el type(MouseEventHandler,…) desde react 😃
Next buenisimo 🙌🏽

Excelente curso Prof. Jonathan, de verdad que es muy beneficioso la minuciosidad de sus clases.

genial