Articles
Einführung in TypeScript
Das window-Objekt in TypeScript

Das window-Objekt in TypeScript

Dieser Artikel erklärt das window-Objekt in TypeScript.

Sie können die Eigenschaften und Methoden des window-Objekts anhand von Code kennenlernen.

YouTube Video

Das window-Objekt in TypeScript

window ist ein globales Objekt in TypeScript und JavaScript, das das gesamte Browserfenster repräsentiert. Es enthält viele Eigenschaften und Methoden, um auf Browser-APIs zuzugreifen, den DOM (Document Object Model) zu manipulieren, Timer zu verwenden, Speicher zu nutzen und andere Funktionen auszuführen.

tsconfig.json und das window-Objekt

In TypeScript besitzen die browserspezifischen globalen Funktionen Typdefinitionen, wenn auf das window-Objekt zugegriffen wird, was eine Autovervollständigung im Editor und eine Typprüfung ermöglicht. Dank der Standard-Typdefinitionsdatei von TypeScript (lib.dom.d.ts) erkennt TypeScript verschiedene Eigenschaften und Methoden des window-Objekts.

Beim Einsatz von TypeScript ist es üblich, eine tsconfig.json-Datei im Wurzelverzeichnis des Projekts zu platzieren. Diese Datei wird verwendet, um Compileroptionen und den Geltungsbereich der Typdefinitionsdateien festzulegen.

Beim Arbeiten mit window ist es besonders wichtig, Browsertype-Definitionen (DOM-Typdefinitionen) zu aktivieren. Ohne dies führen window und document zu Typfehlern.

 1{
 2  "compilerOptions": {
 3    "target": "es6",
 4    "module": "esnext",
 5    "strict": true,
 6    "lib": ["es6", "dom"],   // Enable DOM type definitions
 7    "outDir": "./dist"
 8  },
 9  "include": ["src"]
10}
  • Durch die Angabe von "lib": ["es6", "dom"] werden die Typen von window und document korrekt erkannt und automatisch vervollständigt.

Wichtigste Eigenschaften und Methoden des window-Objekts

  1. window.document window.document ist eine Eigenschaft, die für den Zugriff auf das DOM der Seite verwendet wird. Sie können Elemente abrufen und Änderungen am DOM vornehmen.
1console.log(window.document.title);  // Display the title of the current document
  • In diesem Beispiel wird der Titel des aktuellen Dokuments angezeigt.
  1. window.localStorage / window.sessionStorage window.localStorage und window.sessionStorage sind Eigenschaften, die den Zugriff auf Speicherfunktionen ermöglichen, mit denen Benutzerdaten im Browser gespeichert werden können.
1window.localStorage.setItem('key', 'value');  // Save data
2const value = window.localStorage.getItem('key');  // Retrieve data
3console.log(value);  // 'value'
  • In diesem Beispiel werden Daten in localStorage gespeichert, dann abgerufen und angezeigt.
  1. window.location window.location ist ein Objekt, mit dem Informationen über die aktuelle URL abgerufen und manipuliert werden können. Sie können Weiterleitungen durchführen und URLs ändern.
1console.log(window.location.href);  // Display the current URL
2window.location.href = 'https://example.com';  // Redirect to another page
  • In diesem Beispiel wird die URL angezeigt und der Benutzer auf eine andere Seite weitergeleitet.
  1. window.setTimeout / window.setInterval window.setTimeout und window.setInterval sind Methoden, mit denen Funktionen verzögert oder in regelmäßigen Abständen ausgeführt werden können.
1window.setTimeout(() => {
2    console.log('This will be executed after 2 seconds');
3}, 2000);
  • Dieser Code führt einen Prozess aus, der nach zwei Sekunden eine Nachricht in die Konsole ausgibt.
  1. window.alert / window.confirm / window.prompt alert, confirm und prompt zeigen Dialogfenster an, um Warnungen auszugeben oder Eingaben vom Benutzer anzufordern.
1window.alert('Alert message');
  • Dieser Code zeigt einen Hinweisdialog an, um eine Nachricht zu benachrichtigen.

Ereignisse des window-Objekts

Da window Teil des DOM ist, können Sie auch direkt auf Ereignisse lauschen. In TypeScript werden Typen automatisch vervollständigt, sodass die Verwendung falscher Ereignisnamen oder Eigenschaften zu Fehlern führt.

Resize-Ereignis des Fensters 

1window.addEventListener("resize", (event) => {
2    console.log("Window resized:", window.innerWidth, window.innerHeight);
3});
  • Dieser Code gibt die neue Breite und Höhe in die Konsole aus, wenn sich die Fenstergröße ändert.

Tastaturereignis 

1window.addEventListener("keydown", (event: KeyboardEvent) => {
2    console.log(`Key pressed: ${event.key}`);
3});
  • Dieser Code gibt die gedrückte Taste in die Konsole aus, wenn der Benutzer eine Taste drückt.

Seitenlade-Ereignis 

1window.addEventListener("load", () => {
2    console.log("Page fully loaded");
3});
  • Dieser Code gibt eine Nachricht in die Konsole aus, wenn die Seite vollständig geladen ist.

Notizen

  • In TypeScript werden die Typen von Ereignisobjekten abgeleitet, sodass das Beachten von Typen wie KeyboardEvent oder MouseEvent Ihren Code sicherer macht.

  • Es wird empfohlen, Eventlistener zu entfernen, wenn sie nicht mehr benötigt werden. Sie können Listener mit der Methode window.removeEventListener entfernen.

1function handleClick() {
2  console.log("Clicked!");
3}
4
5// Add event listener
6window.addEventListener("click", handleClick);
7
8// Remove event listener
9window.removeEventListener("click", handleClick);
  • Dieser Code zeigt ein Beispiel dafür, wie man einen Listener für ein Klickevent hinzufügt und ihn dann wieder entfernt.

Beim Hinzufügen benutzerdefinierter Eigenschaften

Beim Hinzufügen benutzerdefinierter Eigenschaften zum window-Objekt ist in TypeScript eine Typenerweiterung erforderlich, um Typfehler zu vermeiden.

1// Add a custom property to the window
2interface Window {
3    myCustomProperty: string;
4}
5
6window.myCustomProperty = "Hello, World!";
7console.log(window.myCustomProperty);  // "Hello, World!"
  • Dieser Code ist ein Beispiel dafür, wie man eine benutzerdefinierte Eigenschaft zum window-Objekt in TypeScript hinzufügt, einen Wert setzt und ihn anzeigt.

Vorsicht beim Verwenden des globalen window-Objekts

Aufgrund der strikten Typprüfung von TypeScript führt der Versuch, nicht vorhandene Eigenschaften oder Methoden zu verwenden, zu Fehlern. Der direkte Versuch, auf eine nicht vorhandene Eigenschaft des window-Objekts zuzugreifen, führt beispielsweise zu einem Fehler, daher müssen Sie den Typ entsprechend erweitern.

Das window-Objekt spielt somit eine zentrale Rolle beim Zugriff auf verschiedene Funktionen von Browseranwendungen, und mit TypeScript können Sie es dank Typprüfung sicher verwenden.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video

Generatorfunktionen in TypeScript