No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Trabajando con librerías que extienden el objeto window

15/16
Recursos

Aportes 7

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Buenisimo el curso

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.