Window-objektet i TypeScript

Denne artikkelen forklarer vindusobjektet i TypeScript.

Du kan lære om egenskapene og metodene til window-objektet gjennom kode.

YouTube Video

Window-objektet i TypeScript

window er et globalt objekt i TypeScript og JavaScript som representerer hele nettleservinduet. Det inkluderer mange egenskaper og metoder for å få tilgang til nettleser-API-er, manipulere DOM (Document Object Model), bruke tidtakere, lagring og andre funksjoner.

tsconfig.json og window-objektet

I TypeScript, når man får tilgang til window-objektet, har de nettleserspesifikke globale funksjonene typedefinisjoner, som muliggjør autoutfylling i editoren og typekontroll. Takket være TypeScripts standard typenedefinisjonsfil (lib.dom.d.ts), gjenkjenner TypeScript ulike egenskaper og metoder for window-objektet.

Når du bruker TypeScript, er det vanlig å plassere en tsconfig.json-fil i roten av prosjektet. Denne filen brukes til å spesifisere kompilatoralternativer og omfanget av typedefinisjonsfiler.

Når du arbeider med window, er det spesielt viktig å aktivere nettlesertype-definisjoner (DOM-type-definisjoner). Uten dette vil window og document føre til typefeil.

 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 å spesifisere "lib": ["es6", "dom"] vil typene for window og document bli korrekt gjenkjent og automatisk utfylt.

Viktige egenskaper og metoder for window

1. window.document window.document er en egenskap som brukes for å få tilgang til DOM-en på siden. Du kan hente elementer og gjøre endringer i DOM-en.

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

• I dette eksemplet vises tittelen på det nåværende dokumentet.

2. window.localStorage / window.sessionStorage window.localStorage og window.sessionStorage er egenskaper som brukes for å få tilgang til lagringsfunksjoner som lar deg lagre brukerdata i nettleseren.

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

• I dette eksemplet lagres data i localStorage, deretter hentes og vises de.

3. window.location window.location er et objekt som brukes til å hente og endre informasjon om gjeldende URL. Du kan utføre omdirigeringer og endre URL-er.

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

• I dette eksemplet vises URL-en og brukeren omdirigeres til en annen side.

4. window.setTimeout / window.setInterval window.setTimeout og window.setInterval er metoder som brukes for å kjøre funksjoner etter en forsinkelse eller med jevne mellomrom.

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

• Denne koden utfører en prosess som skriver ut en melding til konsollen etter to sekunder.

5. window.alert / window.confirm / window.prompt alert, confirm og prompt viser dialogbokser som gir varsler eller ber om innspill fra brukeren.

1window.alert('Alert message');

• Denne koden viser en varslingsdialog for å informere om en melding.

Hendelser for window-objektet

Siden window er en del av DOM, kan du også lytte til hendelser direkte. I TypeScript blir typer automatisk utfylt, så bruk av feil hendelsesnavn eller egenskaper vil føre til feil.

Vindusendringshendelse

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

• Denne koden skriver ut den nye bredden og høyden til konsollen når vindusstørrelsen endres.

Tastaturhendelse

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

• Denne koden skriver ut den trykkede tasten til konsollen når brukeren trykker på en tast.

Sideinnlastingshendelse

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

• Denne koden skriver ut en melding til konsollen når siden er ferdig lastet.

Notater

• I TypeScript blir typer for hendelsesobjekter utledet, så det å være oppmerksom på typer som KeyboardEvent eller MouseEvent gjør koden din tryggere.

• Det anbefales å fjerne event-lyttere når de ikke lenger trengs. Du kan fjerne lyttere ved å bruke 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 koden viser et eksempel på å legge til og deretter fjerne en lytter for en klikkhendelse.

Når du legger til tilpassede egenskaper

Når du legger til tilpassede egenskaper til window-objektet, er det nødvendig med typeutvidelse i TypeScript for å unngå typefeil.

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 koden er et eksempel på å legge til en egendefinert egenskap til window-objektet i TypeScript, sette en verdi og vise den.

Forsiktighetsregler ved bruk av det globale window-objektet

På grunn av TypeScripts strenge typekontroll, vil forsøk på å bruke ikke-eksisterende egenskaper eller metoder føre til feil. For eksempel, forsøk på å få tilgang til en ikke-eksisterende egenskap på window-objektet som den er, vil føre til en feil, så du må utvide typen riktig.

Som sådan spiller window-objektet en sentral rolle i tilgangen til ulike funksjoner i nettleserapplikasjoner, og i TypeScript kan du bruke det trygt ved å utnytte typekontroll.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video