Wie setzen Sie in TypeScript explizit eine neue Eigenschaft für `window`?

Ich richte globale Namespaces für meine Objekte ein, indem ich explizit eine Eigenschaft auf setze window.

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

TypeScript unterstreicht MyNamespaceund beschwert sich über:

Die Eigenschaft 'MyNamespace' ist für den Wert vom Typ 'window' any "nicht vorhanden.

Ich kann den Code MyNamespacezum Laufen bringen, indem windowich ihn als Umgebungsvariable deklariere und die explizite Aussage lösche, aber das möchte ich nicht.

declare var MyNamespace: any;

MyNamespace = MyNamespace || {};

Wie kann ich dort bleiben windowund TypeScript glücklich machen?

Als Randnotiz finde ich es besonders lustig, dass sich TypeScript beschwert, da es mir sagt, dass windowes sich um einen Typ handelt, anyder definitiv alles enthalten kann.

Ich habe die Antwort auf diese Frage in der Antwort einer anderen StackOverflow-Frage gefunden .

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

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

Grundsätzlich müssen Sie die vorhandene windowSchnittstelle erweitern, um Informationen zu Ihrer neuen Eigenschaft zu erhalten.

Um es dynamisch zu halten, verwenden Sie einfach:

(<any>window).MyNamespace

AB TYPESCRIPT ^ 3.4.3 DIESE LÖSUNG FUNKTIONIERT NICHT MEHR

Oder...

Sie können einfach Folgendes eingeben:

window['MyNamespace']

und Sie erhalten keinen Kompilierungsfehler und es funktioniert genauso wie beim Tippen window.MyNamespace

Verwenden Sie TSX? Keine der anderen Antworten funktionierte für mich.

Folgendes habe ich getan:

(window as any).MyNamespace

Die akzeptierte Antwort ist die, die ich früher verwendet habe, aber mit TypeScript 0.9. * Funktioniert sie nicht mehr. Die neue Definition der WindowSchnittstelle scheint die integrierte Definition vollständig zu ersetzen, anstatt sie zu erweitern.

Ich habe mich stattdessen dazu entschlossen:

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

declare var window: MyWindow;

UPDATE: Mit TypeScript 0.9.5 funktioniert die akzeptierte Antwort wieder.

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

Zuerst exportieren Sie die Schnittstelle: (zB: ./custom.window.ts)

export interface CustomWindow extends Window {
    customAttribute: any;
}

Zweitens importieren Sie

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

Drittes globales Var-Fenster mit CustomWindow

declare let window: CustomWindow;

Auf diese Weise haben Sie auch keine rote Linie in einer anderen IDE, wenn Sie mit vorhandenen Attributen des Fensterobjekts verwenden. Versuchen Sie also am Ende:

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

Getestet mit Typescript 2.4.x und neuestem!

Wenn Sie das windowObjekt mit einem benutzerdefinierten Typ erweitern müssen, für den die Verwendung erforderlich ist import, können Sie die folgende Methode verwenden:

window.d.ts

import MyInterface from './MyInterface';

declare global {
    interface Window {
        propName: MyInterface
    }
}

Siehe 'Globale Erweiterung' im Abschnitt 'Zusammenführen von Erklärungen' des Handbuchs: https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation

Für diejenigen, die die Angular CLI verwenden , ist dies unkompliziert:

src / polyfills.ts

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

my-custom-utils.ts

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

Wenn Sie IntelliJ verwenden, müssen Sie außerdem die folgende Einstellung in der IDE ändern, bevor Ihre neuen Polyfills aufgenommen werden:

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

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

Ich habe einfach getan:

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

Oder Sie könnten tun:

let myWindow = window as any;

und dann myWindow.myProp = 'my value';

Die meisten anderen Antworten sind nicht perfekt.

• Einige von ihnen unterdrücken nur die Typinferenz für den Shop.
• Einige der anderen kümmern sich nur um globale Variablen als Namespace, nicht aber als Schnittstelle / Klasse

Ich stoße heute Morgen auch auf ein ähnliches Problem. Ich habe so viele "Lösungen" auf SO ausprobiert, aber keine von ihnen erzeugt absolut keinen Typfehler und ermöglicht das Auslösen des Typenspringens in der IDE (Webstorm oder Vscode).

Endlich von hier

https://github.com/Microsoft/TypeScript/issues/3180#issuecomment-102523512

Ich finde eine vernünftige Lösung, um Typisierungen für globale Variablen anzuhängen, die sowohl als Schnittstelle / Klasse als auch als Namespace fungieren .

Beispiel ist unten:

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

declare interface MyNamespace {
    somemethod?()
}

declare namespace MyNamespace {
    // ...
}

Der obige Code führt nun die Typisierungen von Namespace MyNamespaceund Schnittstelle MyNamespacein die globale Variable myNamespace(die Eigenschaft von window) ein.

Nachdem ich Antworten gefunden habe, denke ich, dass diese Seite hilfreich sein könnte. https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation Sie sind sich nicht sicher über den Verlauf der Zusammenführung von Deklarationen, erklären jedoch, warum das Folgende funktionieren könnte.

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

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

So geht's, wenn Sie TypeScript Definition Manager verwenden !

npm install typings --global

Erstellen typings/custom/window.d.ts:

interface Window {
  MyNamespace: any;
}

declare var window: Window;

Installieren Sie Ihre benutzerdefinierte Eingabe:

typings install file:typings/custom/window.d.ts --save --global

Fertig, benutze es ! Typoskript wird sich nicht mehr beschweren:

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

Typscript führt keine Typprüfung für Zeichenfolgeneigenschaften durch.

window["newProperty"] = customObj;

Idealerweise sollte das globale Variablenszenario vermieden werden. Ich benutze es manchmal, um ein Objekt in der Browserkonsole zu debuggen.

Erstellen Sie eine Datei mit dem Namen global.d.tszB /src/@types/global.d.tsund definieren Sie dann eine Schnittstelle wie:

interface Window {
  myLib: any
}

Ref: https://www.typescriptlang.org/docs/handbook/declaration-files/templates/global-d-ts.html

Wenn Sie Typescript 3.x verwenden, können Sie möglicherweise den declare globalTeil in den anderen Antworten weglassen und stattdessen einfach Folgendes verwenden:

interface Window {
  someValue: string
  another: boolean
}

Dies funktionierte bei mir bei Verwendung von Typescript 3.3, WebPack und TSLint.

Als Referenz (dies ist die richtige Antwort):

In einer .d.tsDefinitionsdatei

type MyGlobalFunctionType = (name: string) => void

Wenn Sie im Browser arbeiten, fügen Sie dem Fensterkontext des Browsers Mitglieder hinzu, indem Sie die Fensteroberfläche erneut öffnen:

interface Window {
  myGlobalFunction: MyGlobalFunctionType
}

Gleiche Idee für NodeJS:

declare module NodeJS {
  interface Global {
    myGlobalFunction: MyGlobalFunctionType
  }
}

Jetzt deklarieren Sie die Stammvariable (die tatsächlich im Fenster oder global lebt).

declare const myGlobalFunction: MyGlobalFunctionType;

Dann in einem regelmäßigen .ts implementieren Sie es Datei, die jedoch als Nebeneffekt importiert wurde, tatsächlich:

global/* or window */.myGlobalFunction = function (name: string) {
  console.log("Hey !", name);
};

Und schließlich verwenden Sie es an anderer Stelle in der Codebasis, entweder mit:

global/* or window */.myGlobalFunction("Kevin");

myGlobalFunction("Kevin");

Eine benutzerdefinierte Schnittstelle erstellen erweitert das Fenster und fügt Ihre benutzerdefinierte Eigenschaft optional hinzu.

Lassen Sie dann das customWindow, das die benutzerdefinierte Oberfläche verwendet, aber mit dem ursprünglichen Fenster bewertet.

Es hat mit dem [email protected] gearbeitet.

interface ICustomWindow extends Window {
  MyNamespace?: any
}

const customWindow:ICustomWindow = window;

customWindow.MyNamespace = customWindow.MyNamespace {} 

Für diejenigen, die eine berechnete oder dynamische Eigenschaft für das windowObjekt festlegen möchten, ist dies mit der declare globalMethode nicht möglich . Zur Verdeutlichung für diesen Anwendungsfall

window[DynamicObject.key] // Element implicitly has an 'any' type because type Window has no index signature

Sie könnten versuchen, so etwas zu tun

declare global {
  interface Window {
    [DyanmicObject.key]: string; // error RIP
  }
}

Das obige wird jedoch fehlerhaft sein. Dies liegt daran, dass in Typescript Schnittstellen mit berechneten Eigenschaften nicht gut funktionieren und einen Fehler wie auslösen

A computed property name in an interface must directly refer to a built-in symbol

Um dies zu umgehen, können Sie dem Vorschlag des Castings folgen window, <any>damit Sie dies tun können

(window as any)[DynamicObject.key]

Mit create-react-app v3.3 fand ich den einfachsten Weg, dies zu erreichen, den WindowTyp in der automatisch generierten zu erweitern react-app-env.d.ts:

interface Window {
    MyNamespace: any;
}

Zuerst müssen Sie das Fensterobjekt im aktuellen Bereich deklarieren.
Weil Typoskript den Typ des Objekts wissen möchte.
Da das Fensterobjekt an einer anderen Stelle definiert ist, können Sie es nicht neu definieren.
Sie können dies jedoch wie folgt deklarieren:

declare var window: any;

Dadurch wird das Fensterobjekt nicht neu definiert oder es wird keine weitere Variable mit Namen erstellt window.
Dies bedeutet, dass das Fenster an einer anderen Stelle definiert ist und Sie es nur im aktuellen Bereich referenzieren.

Dann können Sie einfach auf Ihr MyNamespace-Objekt verweisen, indem Sie:

window.MyNamespace

Oder Sie können die neue Eigenschaft für das windowObjekt einfach festlegen, indem Sie:

window.MyNamespace = MyObject

Und jetzt wird sich das Typoskript nicht beschweren.

Ich wollte dies heute in einer Angular (6) -Bibliothek verwenden, und es dauerte eine Weile, bis dies wie erwartet funktioniert.

Damit meine Bibliothek Deklarationen verwenden konnte, musste ich die d.tsErweiterung für die Datei verwenden, die die neuen Eigenschaften des globalen Objekts deklariert.

Am Ende hatte die Datei also Folgendes:

/path-to-angular-workspace/angular-workspace/projects/angular-library/src/globals.d.ts

Vergessen Sie nach dem Erstellen nicht, es in Ihrem zu belichten public_api.ts.

Das hat es für mich getan. Hoffe das hilft.