Utvidelse av globale typer (f.eks. "Window") innenfor en TypeScript-modul

Hvis du skriver i TypeScript og ikke bruker moduler, er det mulig å utvide det globale Window-objektet. For eksempel, dette kompilerer:

interface Window {
    myCounter: number;
}

window.myCounter = window.myCounter || 0;
++window.myCounter;

function outputLoadingDetails() {
    console.log(`myCounter= ${window.myCounter}`)
}

Men hvis jeg legger til export foran funksjonen outputLoadingDetails, ser det ut til at jeg gjør denne filen om til en modul. Jeg får nå en kompilatorfeil når jeg prøver å få tilgang til window.myCounter.

interface Window {
    myCounter: number;
}

window.myCounter = window.myCounter || 0; // ERROR: property 'MyCounter' does not exist on type `Window`
++window.myCounter;                       // ERROR: property 'MyCounter' does not exist on type `Window`

export function outputLoadingDetails() {
    console.log(`myCounter= ${window.myCounter}`)  // ERROR: property 'MyCounter' does not exist on type `Window`
}

Det ser ut til at grensesnittdeklarasjonen min ikke lenger utvider den globale Window-typen.

En løsning jeg har funnet, er å legge grensesnittdeklarasjonen i en egen *.d.ts-fil, og referere til denne fra modulen min.

Men nå er jeg nysgjerrig. Finnes det en måte jeg kan utvide Window-grensesnittet på innenfor modulens kode?

Svar #1

Ja, du trenger bare å pakke grensesnittet inn i global deklarasjon:

declare global {
    interface Window {
        myCounter: number;
    }
}

Globalt område kan utvides fra moduler ved bruk av declare global-deklarasjoner

Mer informasjon her

** Sørg for at filen behandles som et modul (har import eller export-setning, hvis ikke - du kan legge til en tom export {})

Svar #2

Jeg likte ikke å endre global-deklarasjonen, siden endringer ville vises i andre filer.

Dette var min løsning:

interface customWindow extends Window {
  customProperty?: any;
}

declare const window: customWindow;

/* ... */

window.customProperty

Relaterte artikler