Window-objektet i TypeScript

Denne artikel forklarer window-objektet i TypeScript.

Du kan lære om egenskaber og metoder for window-objektet gennem kode.

YouTube Video

Window-objektet i TypeScript

window er et globalt objekt i TypeScript og JavaScript, der repræsenterer hele browserens vindue. Det inkluderer mange egenskaber og metoder til at få adgang til browser-API'er, manipulere DOM'en (Document Object Model), bruge timere, lagring og andre funktioner.

tsconfig.json og window-objektet

I TypeScript har de browserspecifikke globale funktioner type-definitioner, når man tilgår window-objektet, hvilket muliggør autoudfyldning i editoren og typekontrol. Takket være TypeScripts standard type-definitionsfil (lib.dom.d.ts) genkender TypeScript forskellige egenskaber og metoder for window-objektet.

Når du bruger TypeScript, er det almindeligt at placere en tsconfig.json-fil i roden af projektet. Denne fil bruges til at specificere compiler-indstillinger og omfanget af type-definition filer.

Når du arbejder med window, er det særligt vigtigt at aktivere browser-type definitioner (DOM-type definitioner). Uden dette vil window og document resultere i typefejl.

 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}

• Ved at specificere "lib": ["es6", "dom"], bliver typerne for window og document korrekt genkendt og fuldført automatisk.

Vigtigste egenskaber og metoder for window

1. window.document window.document er en egenskab, der bruges til at tilgå sidens DOM. Du kan hente elementer og foretage ændringer i DOM'en.

1console.log(window.document.title);  // Display the title of the current document

• I dette eksempel vises det aktuelle dokuments titel.

2. window.localStorage / window.sessionStorage window.localStorage og window.sessionStorage er egenskaber, der bruges til at tilgå lagringsfunktioner, som gør det muligt at gemme brugerdata i browseren.

1window.localStorage.setItem('key', 'value');  // Save data
2const value = window.localStorage.getItem('key');  // Retrieve data
3console.log(value);  // 'value'

• I dette eksempel gemmes data i localStorage, hvorefter de hentes og vises.

3. window.location window.location er et objekt, der bruges til at hente og ændre information om den aktuelle URL. Du kan udføre omdirigeringer og ændre URL'er.

1console.log(window.location.href);  // Display the current URL
2window.location.href = 'https://example.com';  // Redirect to another page

• I dette eksempel vises URL'en, og brugeren omdirigeres til en anden side.

4. window.setTimeout / window.setInterval window.setTimeout og window.setInterval er metoder, der bruges til at køre funktioner efter en forsinkelse eller med faste intervaller.

1window.setTimeout(() => {
2    console.log('This will be executed after 2 seconds');
3}, 2000);

• Denne kode udfører en proces, der skriver en besked til konsollen efter to sekunder.

5. window.alert / window.confirm / window.prompt alert, confirm og prompt viser dialogbokse for at vise advarsler eller anmode brugeren om input.

1window.alert('Alert message');

• Denne kode viser en advarselsdialog for at give en besked.

Events på window-objektet

Da window er en del af DOM'en, kan du også lytte til events direkte. I TypeScript bliver typer autoudfyldt, så brug af forkerte eventnavne eller egenskaber vil forårsage fejl.

Ændringsstørrelse-event på window

1window.addEventListener("resize", (event) => {
2    console.log("Window resized:", window.innerWidth, window.innerHeight);
3});

• Denne kode skriver den nye bredde og højde til konsollen, når vinduets størrelse ændres.

Tastatur-event

1window.addEventListener("keydown", (event: KeyboardEvent) => {
2    console.log(`Key pressed: ${event.key}`);
3});

• Denne kode skriver den tast, brugeren trykker på, til konsollen.

Sideindlæsnings-event

1window.addEventListener("load", () => {
2    console.log("Page fully loaded");
3});

• Denne kode skriver en besked til konsollen, når siden er færdig med at indlæse.

Noter

• I TypeScript bliver event-objekters typer udledt, så det gør din kode mere sikker at være opmærksom på typer som KeyboardEvent eller MouseEvent.

• Det anbefales at fjerne event listeners, når de ikke længere er nødvendige. Du kan fjerne lyttere ved at bruge metoden 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);

• Denne kode viser et eksempel på at tilføje og derefter fjerne en lytter for et klik-event.

Ved tilføjelse af brugerdefinerede egenskaber

Når man tilføjer brugerdefinerede egenskaber til window-objektet, er det nødvendigt at udvide typerne i TypeScript for at undgå typefejl.

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!"

• Denne kode er et eksempel på at tilføje en brugerdefineret egenskab til window-objektet i TypeScript, sætte en værdi og vise den.

Forholdsregler ved brug af det globale window-objekt

På grund af TypeScripts strenge typekontrol vil forsøg på at bruge ikke-eksisterende egenskaber eller metoder resultere i fejl. For eksempel vil forsøg på at tilgå en ikke-eksisterende egenskab på window-objektet som det er, medføre fejl, så det er nødvendigt at udvide typen korrekt.

Som sådan spiller window-objektet en central rolle i adgang til forskellige funktioner i browserapplikationer, og i TypeScript kan du bruge det sikkert ved at drage fordel af typekontrol.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video