TypeScript-Fenster erweitern

1. TypeScript-Objekt Window
2. Deklarieren Sie eine neue Eigenschaft im Objekt Window in TypeScript
3. Zusammenführen von Schnittstellendeklarationen in TypeScript

Dieser Artikel zeigt, wie man ein TypeScript-window erweitert.

TypeScript-Objekt Window

Ein Window ist ein im Browser definiertes eingebautes Objekt. Es ist das window-Objekt, das ein DOM-Dokument enthält.

Möglicherweise müssen Sie auf die Eigenschaften und Funktionen zugreifen, die mit dem Browserobjekt window verknüpft sind. Das eingebaute window-Objekt trägt viele nützliche Eigenschaften und Funktionen aus der Box.

Nachfolgend sind einige der häufig verwendeten Eigenschaften und Funktionen von window-Objekten aufgelistet.

1. Eigenschaften: EventTarget, document, console, event, localStorage, onLoad usw.
2. Methoden: addEventListener, fetch, alert, atob, btoa, open, prompt, print usw.

Normalerweise definiert TypeScript seine Typen in verschiedenen Modulen. Daher wird der Typ window im Modul lib.dom definiert.

In einigen Szenarien reichen die integrierten Methoden und Eigenschaften nicht aus. Wenn Ihr TypeScript-Projekt Google Analytics- oder Tag Manager-Bibliotheken verwendet, werden diese Skripts möglicherweise nicht von Ihrem Code geladen.

Daher brauchen wir eine Möglichkeit, mit diesen Tools von Drittanbietern über die Objekteigenschaften und -methoden des Fensters zu kommunizieren.

Deklarieren Sie eine neue Eigenschaft im Objekt Window in TypeScript

In JavaScript ist es ziemlich einfach, eine neue Eigenschaft oder Methode im eingebauten window-Objekt zu deklarieren. Wir können die folgenden Möglichkeiten verwenden, um eine neue Eigenschaft im Objekt window mit JavaScript zu definieren.

window.myProp = 'newly declared property';
window['myProp'] = 'newly declared property';

Sehen wir uns das Objekt window in der Browser-Konsole an.

console.log(window);

Ausgabe:

In TypeScript würden die oben genannten Ansätze nicht funktionieren. Wenn wir versuchen, eine neue Eigenschaft im window-Objekt wie in JavaScript zu deklarieren, wirft TypeScript einen Fehler, wie im Folgenden gezeigt.

window.anotherNewProp = 'this is a property on window object in typescript';

Ausgabe:

Normalerweise basiert ein TypeScript-Objekttyp auf einer Klasse oder einer Schnittstelle. Nehmen wir an, wir haben eine Klasse namens Animal, wie im Folgenden gezeigt.

class Animal {
    name: string;
    color: string;
}

Lassen Sie uns ein Animal-Objekt erstellen und den Eigenschaften name und color einige Werte zuweisen.

class Animal {
    name: string;
    color: string;
}

let newAnimal = new Animal();

newAnimal.name = 'lion';
newAnimal.color = 'grey';

Der obige Code wird ohne Probleme kompiliert.

Als nächstes werden wir versuchen, eine neue Eigenschaft numberOfLegs für dasselbe Animal-Objekt zu deklarieren und ihr einen Wert zuzuweisen.

class Animal {
    name: string;
    color: string;
}

let newAnimal = new Animal();

newAnimal.name = 'lion';
newAnimal.color = 'grey';
newAnimal.numberOfLegs = 4;

Es löst einen Fehler aus. Wir können in TypeScript keine neuen Objekteigenschaften wie diese deklarieren.

Um das zu lösen, müssen wir zuerst die Eigenschaft numberOfLegs zur Klasse Animal hinzufügen.

Dies ist das gleiche Problem auch mit dem eingebauten window-Objekt. Das Hauptanliegen ist, dass das TypeScript-Objekt window nicht von uns selbst erstellt wird.

Es kommt mit einem Browser. Daher brauchen wir einen geeigneten Weg, um diesem eingebauten Objekt eine Eigenschaft hinzuzufügen.

Zusammenführen von Schnittstellendeklarationen in TypeScript

TypeScript unterstützt die Methode zum Zusammenführen von Deklarationen standardmäßig. Die einfachste Art der Deklarationszusammenführung ist die Schnittstellenzusammenführung.

Immer wenn mehrere Schnittstellen mit demselben Namen deklariert werden, führt TypeScript alle Schnittstellendeklarationen zu einer zusammen.

Das eingebaute window-Objekt basiert auf der TypeScript window-Schnittstelle. Daher können wir die Technik zum Zusammenführen von TypeScript-Schnittstellen verwenden, um der integrierten Schnittstelle eine neue Eigenschaft hinzuzufügen.

Lassen Sie uns eine neue Schnittstelle namens window erstellen.

interface Window {
    myProp: string;
}

Als nächstes werden wir versuchen, auf die Eigenschaft myProp im Objekt window zuzugreifen.

interface Window {
    myProp: string;
}

window.myProp = 'typescript window object property';

Ausgabe:

Diesmal gibt es keine Probleme, die vom TypeScript-Compiler aufgeworfen werden. Unter Berücksichtigung der Typen empfiehlt es sich, neue Eigenschaften oder Methoden im Objekt window zu definieren.

Wenn es keine Bedenken hinsichtlich der Typen gibt, kann die folgende Syntax verwendet werden, um neue Eigenschaften für das Objekt window zu deklarieren.

(<any>.window).myProp = 'typescript property on window object';

Sie können auch Funktionen deklarieren.

(<any>.window).NewFunction = () => {
    console.log('new function on window object');
}

Beide Techniken können mit TypeScript verwendet werden, um dem window-Objekt neue Eigenschaften oder Methoden hinzuzufügen. Die Wahl liegt bei Ihnen, basierend auf dem Kontext.