Buenisimo el curso
Introducción
El presente del Frontend es TypeScript
Tipado implícito vs. tipado explícito
Creando una app con React y TypeScript
Tipado en React
Diferentes formas de definir un componente
El objeto props y children
State con tipos primitivos
State con tipos personalizados
React y el DOM
Tipos para eventos y callbacks de escuchadores
Tipos para referencias y observadores
Lazy loading con observadores
Componentes que extienden elementos DOM
Reto: sigamos extendiendo el DOM
Configuraciones avanzadas
Creando tipos propios para la aplicación
Trabajando con librerías no-tipadas
Trabajando con librerías que extienden el objeto window
Próximos pasos
¿Quieres más cursos de React con TypeScript?
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
No se trata de lo que quieres comprar, sino de quién quieres ser. Aprovecha el precio especial.
Antes: $249
$209
Paga en 4 cuotas sin intereses
Termina en:
15 Días
18 Hrs
39 Min
11 Seg
Trabajando con librerías que extienden el objeto window
15/16Recursos
Aportes 7
Preguntas 3
Ordenar por:
Se agrega el código de Plausible en el <head></head>
<script
defer
data-domain="yourdomain.com"
src="https://plausible.io/js/script.js"
></script>
Luego tenemos la carpeta de types
types->plausible->index.d.ts
type Options = {
callback?: () => void;
props?: Record<string, string | number | undefined>;
};
interface Window {
plausible: (event: "add_fox" | "remove_fox", options?: Options) => void;
}
Typescript nos anima a ser mejores programadores y facilitar la vida de nuestros compañeros!! quede convencido.
Trabajando con librerías que extienden el objeto window
Tambien podemos extender el objeto windows por ejemplos cuando utilizamos librerias como Plausible que es similar a google analitycs. Esta libreria solo nos pide que agreguemos un script a nuestro HTML
<script
defer
data-domain="yourdomain.com"
src="https://plausible.io/js/script.js"
></script>
Pero si queremos hacer seguimiento a la interaccion de un boton para obtener analiticas, debemos llamar a la funcion plausible('add_fox') El problema es que typescript no dabe que existe esta funcion dentro de windows. Entonces nosotros podemos crear un directorio con los tipos: @types dentro de este directorio colocaremos otro directorio con el nombre de la libreria y en su interior un archivo index.d.ts
type Options = {
callback?: () => void
props: Record<string, string | number | undefined>
}
interface Window {
plausible: (event:'add_fox' | 'remove_fox', options?: Options ) => void
}
Al definir una interface con el mismo nombre que un objeto que ya existe, typescript lo va a extender, y le va a agregar la propiedad plausible, la cual podemos tipar segun lo que nos indique la libreria que deberia recibir.
Al momento de tipar la funcion plausible dentro del objeto Window, opte por usar enum. Los enums son similares a los types, permiten definir un conjunto de constantes con nombre.
enum PlausibleEvents {
ADD_FOX = 'add_fox',
REMOVE_FOX = 'remove_fox'
}
type Options={
callback?: () => void;
props: Record<string, string | number | undefined>;
}
interface Window {
plausible: (event:PlausibleEvents, options?:Options) => void;
}
Ahora, en el archivo index.tsx debemos enviar en argumento a la función de la siguiente forma (Normalmente toca importar el enum, pero como esta dentro de la carpeta @types queda de forma global):
window.plausible(PlausibleEvents.ADD_FOX)
Me siento poderoso
Es por esto mismo que me encanta Java ☕, los tipos son potentes y ahorran tanto tiempo.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?