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

Für diejenigen, die das Angular CLI ist es ganz einfach:

Datei src/polyfills.ts

declare global {
  interface Window {
    myCustomFn: () => void;
  }
}

Datei my-custom-utils.ts

window.myCustomFn = function () {
  ...
};

Wenn Sie Folgendes verwenden IntelliJ IDEA müssen Sie auch die folgende Einstellung in der IDE ändern, bevor Sie Ihre neue Polyfills abholen:

> File
> Settings
> Languages & Frameworks
> TypeScript
> check 'Use TypeScript Service'.

Answer 2

Die akzeptierte Antwort ist die, die ich früher verwendet habe, aber mit TypeScript 0.9.* funktioniert sie nicht mehr. Die neue Definition des Window Schnittstelle scheint die integrierte Definition vollständig zu ersetzen, anstatt sie zu ergänzen.

Ich bin dazu übergegangen, dies zu tun:

interface MyWindow extends Window {
    myFunction(): void;
}

declare var window: MyWindow;

UPDATE : Mit TypeScript 0.9.5 funktioniert die akzeptierte Antwort wieder.

Answer 3

Wenn Sie die window Objekt mit einem benutzerdefinierten Typ, der die Verwendung von import können Sie die folgende Methode anwenden:

fenster.d.ts

import MyInterface from './MyInterface';

declare global {
    interface Window {
        propName: MyInterface
    }
}

Voir Globale Augmentation im Abschnitt "Zusammenführung von Erklärungen" des Handbuchs.

Answer 4

Erstellen Sie eine Datei namens global.d.ts , z.B., /src/@types/global.d.ts und definieren dann eine Schnittstelle wie:

interface Window {
  myLib: any
}

Referenz: Global .d.ts

Answer 5

Die meisten der anderen Antworten sind nicht perfekt.

• Einige von ihnen unterdrücken die Typ-Inferenz nur zum Schein.
• Einige der anderen kümmern sich nur um globale Variablen als Namespaces, aber nicht als Schnittstellen/Klassen

Auch ich bin heute Morgen auf ein ähnliches Problem gestoßen. Ich habe so viele "Lösungen" auf Stack Overflow ausprobiert, aber keine von ihnen produzierte absolut keine Typfehler und aktivierte das Auslösen von Typsprüngen in der IDE ( WebStorm o Visual Studio-Code ).

Schließlich, von Moduldefinitionen können als globale Variablen deklariert werden #3180

Ich habe eine vernünftige Lösung für Typisierungen für eine globale Variable anfügen, die sowohl als Schnittstelle/Klasse als auch als Namensraum fungiert .

Das Beispiel ist unten zu sehen:

// typings.d.ts
declare interface Window {
    myNamespace?: MyNamespace & typeof MyNamespace
}

declare interface MyNamespace {
    somemethod?()
}

declare namespace MyNamespace {
    // ...
}

Der obige Code führt die Typisierungen des Namespace MyNamespace und Schnittstelle MyNamespace in die globale Variable myNamespace (die Eigenschaft von Fenster ).