Typescript: Caso de uso de la declaración de fusión de interfaces

Imagina que quieres extender Window desde cualquier sitio en tu código, haciendo que global flags, funciones, APIs,... estén dispobibles desde cualquier lugar.

¿Cómo haríamos eso? Es bastante simple. Para hacerlo, debemos declarar la interfaz de Window dentro de un espacio de nombres global ( namespace global ).

declare global {
    interface Window {
        …
    }
}

Los espacios de nombres (namespaces) se usan, principalmente, cuando queremos distribuir declaraciones de tipo entre archivos. Pero, cada vez que queramos extender la interfaz de Window no queremos sobreescribir el tipo por completo, por lo que le adjuntaremos un campo personalizado.

declare global {
    interface Window {
        debug: boolean;
    }
}

Espera, espera, espera... pero dime donde debería declarar este tipo de cosas... El enfoque más común es crear un archivo de declaración de tipos (ambient.d.ts). Un archivo de declaraciones ambiental nos permite decirle a TypeScript que algunas variables, funciones,... son conocidas y definidas globalmente. Por lo general, estas declaraciones se almacenan en una carpeta @types en la raíz del proyecto.

Es posible que hayas hecho algo como esto: npm install @types/react

Con este comando estás instalando las declaraciones de tipo de React. Estas declarataciones son "ambientales" y TypeScript sabe como trabajar con ellas.

¿Cómo sabe TypeScript que estas declaraciones existen? En el archivo tsconfig.json, podemos definir una propiedad llamada typeRoots. En esta propiedad, definimos donde se puede encontrar información adicional de los tipos.

{
    "compilerOptions": {
        "target": "ES2020",
        "module": "es2020",
        "allowJs": true,
        "checkJs": true,
        "typeRoots": [
            "@types",
            "./node_modules/@types"
        ],
        "esModuleInterop": true,
    },
    "include": ["src", "@types"]
}

En el ejemplo anterior, @types es nuestra carpeta de tipos donde mantendremos nuestras módulo de declaraciones de ambientales. La otra carpeta es la node_modules/@types que es donde se almacenerán las declaraciones ambientales de las bibliotecas/dependencias que tenemos instaladas en el proyecto (por ejemplo: @types/react).

Con esa configuración, la propiedad debug estará disponible en todos los archivos JavaScript/TypeScript. Siempre y cuando esta variable esté definida y disponible en ámbito global.

if (window.debug) {
    console.log(“Debug mode!”)
}