window-objektet i TypeScript

Den här artikeln förklarar window-objektet i TypeScript.

Du kan lära dig om egenskaper och metoder för window-objektet genom kod.

YouTube Video

window-objektet i TypeScript

window är ett globalt objekt i TypeScript och JavaScript som representerar hela webbläsarfönstret. Det innehåller många egenskaper och metoder för att få tillgång till webbläsar-API:er, manipulera DOM (Document Object Model), använda timers, lagring och andra funktioner.

tsconfig.json och window-objektet

I TypeScript, när man får tillgång till window-objektet, har de globala webbplatsfunktionerna typdefinitioner som möjliggör autokomplettering och typkontroll i editorn. Tack vare TypeScripts standardfil för typdefinitioner (lib.dom.d.ts) känner TypeScript igen olika egenskaper och metoder för window-objektet.

När du använder TypeScript är det vanligt att placera en tsconfig.json-fil i projektets rotkatalog. Den här filen används för att ange kompilatoralternativ och omfattningen av typdefinitionsfiler.

När du arbetar med window är det särskilt viktigt att aktivera webbläsartypdefinitioner (DOM-typdefinitioner). Utan detta kommer window och document att ge typfel.

 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}

• Genom att ange "lib": ["es6", "dom"] kommer typerna för window och document att kännas igen och autokompletteras korrekt.

Huvudsakliga window-egenskaper och metoder

1. window.document window.document är en egenskap som används för att komma åt sidans DOM. Du kan hämta element och göra ändringar i DOM.

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

• I det här exemplet visas den aktuella dokumenttiteln.

2. window.localStorage / window.sessionStorage window.localStorage och window.sessionStorage är egenskaper som används för att komma åt lagringsfunktioner som gör det möjligt att spara användardata i webbläsaren.

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

• I det här exemplet sparas data i localStorage, hämtas sedan och visas.

3. window.location window.location är ett objekt som används för att hämta och manipulera information om aktuell URL. Du kan utföra omdirigeringar och ändra URL:er.

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

• I det här exemplet visas URL:en och användaren omdirigeras till en annan sida.

4. window.setTimeout / window.setInterval window.setTimeout och window.setInterval är metoder som används för att köra funktioner efter en fördröjning eller vid regelbundna intervall.

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

• Den här koden kör en process som skriver ut ett meddelande i konsolen efter två sekunder.

5. window.alert / window.confirm / window.prompt alert, confirm och prompt visar dialogrutor för att visa meddelanden eller be om inmatning från användaren.

1window.alert('Alert message');

• Den här koden visar en popup-varning för att meddela ett meddelande.

Händelser för window-objektet

Eftersom window är en del av DOM kan du också lyssna på händelser direkt. I TypeScript autokompletteras typer, så att använda felaktiga händelsenamn eller egenskaper kommer att orsaka fel.

Fönsterstorleksändringshändelse

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

• Den här koden skriver ut den nya bredden och höjden i konsolen när fönsterstorleken ändras.

Tangentbordshändelse

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

• Den här koden skriver ut vilken tangent som tryckts ned i konsolen när användaren trycker på en tangent.

Sidladdningshändelse

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

• Den här koden skriver ut ett meddelande i konsolen när sidan har laddats klart.

Anteckningar

• I TypeScript härleds händelseobjekttyper, så att vara uppmärksam på typer som KeyboardEvent eller MouseEvent gör din kod säkrare.

• Det rekommenderas att ta bort händelselyssnare när de inte längre behövs. Du kan ta bort lyssnare med hjälp av 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);

• Den här koden visar ett exempel på att lägga till och sedan ta bort en lyssnare för ett klick-evenemang.

När man lägger till egna egenskaper

När man lägger till egna egenskaper i window-objektet är det nödvändigt med typutvidgning i TypeScript för att undvika typfel.

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

• Den här koden är ett exempel på att lägga till en anpassad egenskap till window-objektet i TypeScript, sätta ett värde och visa det.

Försiktighetsåtgärder vid användning av det globala window-objektet

På grund av TypeScripts strikta typkontroll kommer försök att använda icke-existerande egenskaper eller metoder att resultera i fel. Till exempel, att försöka få tillgång till en icke-existerande egenskap på window-objektet som det är kommer att orsaka ett fel, så du måste utvidga typen korrekt.

Som sådan spelar window-objektet en central roll för att få tillgång till olika funktioner i webbläsarapplikationer, och i TypeScript kan du använda det säkert genom att utnyttja typkontroll.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video