Wie legt man in TypeScript explizit eine neue Eigenschaft für "Fenster" fest?

Question

Ich richte globale Namensräume für meine Objekte ein, indem ich explizit eine Eigenschaft auf window .

window.MyNamespace = window.MyNamespace || {};

TypeScript unterstreicht MyNamespace und beschwert sich darüber:

Die Eigenschaft 'MyNamespace' existiert nicht auf valu any"

Ich kann den Code zum Laufen bringen, indem ich deklariere MyNamespace als Umgebungsvariable und das Weglassen der window aber das will ich nicht.

declare var MyNamespace: any;

MyNamespace = MyNamespace || {};

Wie kann ich die window einfügen und TypeScript glücklich machen?

Als Randbemerkung finde ich es besonders lustig, dass TypeScript sich beschwert, da es mir sagt, dass window ist vom Typ any die durchaus alles enthalten kann.

Answer 1

Ich muss das nicht sehr oft tun. Der einzige Fall, den ich hatte, war bei der Verwendung von Redux DevTools mit Middleware.

Ich habe es einfach getan:

const composeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

Oder Sie könnten es tun:

let myWindow = window as any;

Und dann myWindow.myProp = 'my value';

Answer 2

Seit der Version 3.4 unterstützt TypeScript globalThis . Siehe Typprüfung für globalThis .

Aus dem obigen Link :

// in a global file:
var abc = 100;
// Refers to 'abc' from above.
globalThis.abc = 200;
window.abc = 300; // window object can also be used.

Spielplatz

Eine "globale" Datei ist eine Datei, die keine Import/Export-Anweisungen enthält. Daher ist die Erklärung var abc; kann geschrieben werden in .d.ts .

Answer 3

Nachdem ich einige Antworten gefunden habe, denke ich, dass diese Seite hilfreich sein könnte:

Globale Vergrößerung

Ich bin mir über die Geschichte der Zusammenführung von Erklärungen nicht sicher, aber sie erklärt, warum das Folgende funktionieren könnte.

declare global {
    interface Window { MyNamespace: any; }
}

window.MyNamespace = window.MyNamespace || {};

Answer 4

Wenn Sie TypeScript 3.x verwenden, können Sie möglicherweise die declare global Teil in den anderen Antworten und verwenden Sie stattdessen einfach:

interface Window {
  someValue: string
  another: boolean
}

Bei mir hat das mit TypeScript 3.3 funktioniert, Webpack y TSLint .

Answer 5

Mit create-react-app v3.3 fand ich den einfachsten Weg, dies zu erreichen, war die Erweiterung der Window geben Sie das automatisch generierte react-app-env.d.ts :

interface Window {
    MyNamespace: any;
}