Articles
Introductie tot TypeScript
Het window-object in TypeScript

Het window-object in TypeScript

Dit artikel legt het window-object in TypeScript uit.

Je kunt leren over de eigenschappen en methoden van het window-object via codevoorbeelden.

YouTube Video

Het window-object in TypeScript

window is een globaal object in TypeScript en JavaScript dat het gehele browservenster vertegenwoordigt. Het bevat vele eigenschappen en methoden om toegang te krijgen tot browser-API's, de DOM (Document Object Model) te manipuleren, timers en opslag te gebruiken, en andere functies.

tsconfig.json en het window-object

In TypeScript, wanneer het window object wordt benaderd, hebben de browser-specifieke globale functies typedefinities, waardoor editor-autocompletie en typecontrole mogelijk zijn. Dankzij TypeScripts standaardtypedefinitiebestand (lib.dom.d.ts) herkent TypeScript verschillende eigenschappen en methoden van het window-object.

Bij het gebruik van TypeScript is het gebruikelijk een tsconfig.json-bestand in de hoofdmap van het project te plaatsen. Dit bestand wordt gebruikt om compiler-opties en het bereik van type-definitiebestanden te specificeren.

Bij het werken met window is het vooral belangrijk om browsertype-definities (DOM-type-definities) in te schakelen. Zonder dit zullen window en document leiden tot typefouten.

 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}
  • Door "lib": ["es6", "dom"] te specificeren, worden de types van window en document correct herkend en automatisch aangevuld.

Belangrijkste window-eigenschappen en -methoden

  1. window.document window.document is een eigenschap die wordt gebruikt om toegang te krijgen tot de DOM van de pagina. Je kunt elementen ophalen en wijzigingen aanbrengen in de DOM.
1console.log(window.document.title);  // Display the title of the current document
  • In dit voorbeeld wordt de titel van het huidige document weergegeven.
  1. window.localStorage / window.sessionStorage window.localStorage en window.sessionStorage zijn eigenschappen die toegang geven tot opslagfuncties waarmee gebruikersgegevens in de browser kunnen worden opgeslagen.
1window.localStorage.setItem('key', 'value');  // Save data
2const value = window.localStorage.getItem('key');  // Retrieve data
3console.log(value);  // 'value'
  • In dit voorbeeld worden gegevens opgeslagen in localStorage, vervolgens opgehaald en weergegeven.
  1. window.location window.location is een object dat wordt gebruikt om informatie over de huidige URL op te halen en te bewerken. Je kunt doorsturen uitvoeren en URL's wijzigen.
1console.log(window.location.href);  // Display the current URL
2window.location.href = 'https://example.com';  // Redirect to another page
  • In dit voorbeeld wordt de URL weergegeven en wordt de gebruiker doorgestuurd naar een andere pagina.
  1. window.setTimeout / window.setInterval window.setTimeout en window.setInterval zijn methoden waarmee functies na een vertraging of op regelmatige tijdstippen kunnen worden uitgevoerd.
1window.setTimeout(() => {
2    console.log('This will be executed after 2 seconds');
3}, 2000);
  • Deze code voert een proces uit dat na twee seconden een bericht naar de console stuurt.
  1. window.alert / window.confirm / window.prompt alert, confirm en prompt tonen dialoogvensters om waarschuwingen weer te geven of om invoer van de gebruiker te vragen.
1window.alert('Alert message');
  • Deze code toont een waarschuwingsdialoog om een bericht te melden.

Gebeurtenissen van het window-object

Omdat window deel uitmaakt van de DOM, kun je ook direct naar gebeurtenissen luisteren. In TypeScript worden types automatisch aangevuld, dus het gebruik van onjuiste gebeurtenisnamen of eigenschappen leidt tot fouten.

Window-resize gebeurtenis 

1window.addEventListener("resize", (event) => {
2    console.log("Window resized:", window.innerWidth, window.innerHeight);
3});
  • Deze code geeft de nieuwe breedte en hoogte weer in de console wanneer de venstergrootte verandert.

Toetsenbordgebeurtenis 

1window.addEventListener("keydown", (event: KeyboardEvent) => {
2    console.log(`Key pressed: ${event.key}`);
3});
  • Deze code geeft de ingedrukte toets weer in de console wanneer de gebruiker een toets indrukt.

Pagina-laadgebeurtenis 

1window.addEventListener("load", () => {
2    console.log("Page fully loaded");
3});
  • Deze code geeft een bericht weer in de console wanneer de pagina volledig is geladen.

Notities

  • In TypeScript worden de typen van gebeurtenisobjecten afgeleid, dus rekening houden met typen zoals KeyboardEvent of MouseEvent maakt je code veiliger.

  • Het is aan te raden om event listeners te verwijderen wanneer ze niet meer nodig zijn. Je kunt luisteraars verwijderen met de methode window.removeEventListener.

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);
  • Deze code geeft een voorbeeld van het toevoegen en vervolgens verwijderen van een luisteraar voor een klikgebeurtenis.

Bij het toevoegen van aangepaste eigenschappen

Bij het toevoegen van aangepaste eigenschappen aan het window-object is type-extensie noodzakelijk in TypeScript om typefouten te voorkomen.

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!"
  • Deze code is een voorbeeld van het toevoegen van een aangepaste eigenschap aan het window-object in TypeScript, het instellen van een waarde en het weergeven ervan.

Voorzichtigheid bij het gebruik van het globale window-object

Door TypeScripts strikte typecontrole zullen pogingen om niet-bestaande eigenschappen of methoden te gebruiken leiden tot fouten. Bijvoorbeeld, pogingen om een niet-bestaande eigenschap op het window-object direct te benaderen, zullen een fout veroorzaken, dus moet je het type correct uitbreiden.

Het window-object speelt zodoende een centrale rol bij toegang tot verschillende functies van browser-applicaties, en in TypeScript kun je het veilig gebruiken dankzij typecontrole.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video

Generatorfuncties in TypeScript