Clase 15 de 16 • Curso de React.js con TypeScript
Contenido del curso
Nicolas Forero Quevedo
Mauricio Combariza
Eduardo Pech
Manuel Valencia Londoño
Kevin Parra Lopez
Emilio Nicolás Mendoza Patti
Fernando Orozco Velasquez
Armando Rivera
Juan David García Montenegro
Miguel Angel Reyes Moreno
Ramiro Aduviri
Harold Zurita Simon
Miguel Angel Reyes Moreno
Juan Castro
Alvaro Rafael Guete Puello
Jose Ever Muñoz Muñoz
Buenisimo el curso
Typescript nos anima a ser mejores programadores y facilitar la vida de nuestros compañeros!! quede convencido.
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; }
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)
Excelente, lo habia pensado igual
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.
¿Alguien sabe por qué al darle click a "Add new Fox" me dice que "window.plausible" no es una function?¿Esta relacionado más con JavaScript o con TypeScript?
Hay alguna manera de instalar con npm las interfaces de plausible en lugar de definirlas manualmente nosotros mismos?
Es por esto mismo que me encanta Java ☕, los tipos son potentes y ahorran tanto tiempo.
Me siento poderoso
No exageres hijito
🌍 Extender el objeto window en TypeScript
Existen plugins y scripts que extienden el objeto global window añadiendo nuevos métodos o propiedades.
Es importante saber cómo decirle a TypeScript, de forma correcta y óptima, que estos métodos sí existen y que vamos a utilizarlos 👌.
Vamos a verlo con un ejemplo real: Plausible, una alternativa ligera a Google Analytics 📊✨.
📦 ¿Qué es Plausible en este contexto?
<Head>window.plausibleUna vez cargado el script, podemos usarlo directamente:
const addNewFox: MouseEventHandler<HTMLButtonElement> = () => { ... window.plausible("signup"); };
⚠️ El problema con TypeScript
TypeScript no sabe que window.plausible existe 😵
Por defecto, el objeto window no tiene ese método tipado.
👉 Resultado: error de TypeScript ❌
✅ Solución correcta: extender Window
Como no se trata de una dependencia, sino de extender un objeto global, debemos declarar el tipo nosotros mismos.
📁 Estructura recomendada
Creamos una carpeta de tipos:
@types/ └── plausible/ └── index.d.ts
🧩 Declaración básica
Dentro de index.d.ts:
interface Window { plausible: (event: string) => void; }
📌 Con esto:
window.plausible🎯 Tipado avanzado (mejor DX)
Podemos ir más lejos y tipar exactamente cómo funciona Plausible, incluyendo:
type Options = { callback?: () => void; props: Record<string, string | number | undefined>; }; interface Window { plausible: ( event: "add_fox" | "remove_fox", options?: Options ) => void; }
✨ Beneficios inmediatos
📖 TypeScript como documentación viva
Gracias a este tipado:
💡 Otros desarrolladores podrán entender cómo usar window.plausiblesimplemente leyendo los tipos, sin buscar documentación externa.
🏁 Conclusión
windowWindow.d.ts son el lugar correctoTypeScript no solo nos ayuda a escribir código con más confianza,
nos empuja a escribir código mejor pensado, más mantenible y más profesional 💪😄
¿A alguien más le manda error 403 cuando se quieren registrar en plausible?
Creo que ya funciona de nuevo
¿Qué estrategias puedes seguir si la librería externa (como Possible) cambia su API y no existe documentación oficial para actualizar los tipos en TypeScript?
esta seccion es exelente ! ensenia a como abordar retos en el mundo real !