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 habe gerade die Antwort auf diese Frage gefunden in die Antwort auf eine andere Stack Overflow-Frage .

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

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

Im Grunde müssen Sie die bestehende window Schnittstelle, um sie über Ihre neue Immobilie zu informieren.

Answer 2

Um es dynamisch zu halten, verwenden Sie einfach:

(<any>window).MyNamespace

Beachten Sie, dass dies möglicherweise nicht mit TSX funktioniert, weil der Compiler denken könnte, dass die <any> ist ein TSX-Element. Prüfen Sie 本答 für die Typisierung, die mit TSX kompatibel ist.

Answer 3

Verwenden Sie Svelte oder TSX? Keine der anderen Antworten hat bei mir funktioniert.

Ich habe Folgendes getan:

(window as any).MyNamespace

Answer 4

Ab TypeScript ^3.4.3 funktioniert diese Lösung nicht mehr

Oder...

können Sie einfach tippen:

window['MyNamespace']

Sie werden keinen Kompilierfehler erhalten und es funktioniert genauso wie die Eingabe von window.MyNamespace .

Answer 5

Globale sind "böse" :) Ich denke, der beste Weg, um auch die Portabilität zu haben ist:

Zuerst exportieren Sie die Schnittstelle: (zum Beispiel, ./custom.window.ts )

export interface CustomWindow extends Window {
    customAttribute: any;
}

Zweitens: Sie importieren

import {CustomWindow} from './custom.window.ts';

Drittens: Besetzen Sie die globale Variable window mit CustomWindow:

declare let window: CustomWindow;

Auf diese Weise haben Sie auch keine rote Linie in einer anderen IDE, wenn Sie sie mit vorhandenen Attributen der Fenster Objekt, also am Ende versuchen:

window.customAttribute = 'works';
window.location.href = '/works';

Getestet mit TypeScript 2.4.x und neuer!