No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

4D
1H
24M
30S

Tipos para eventos y callbacks de escuchadores

8/16
Recursos

Aportes 7

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Excelente鈥 lo mejor hasta el momento

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

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
}

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.

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.

genial