L'oggetto window in TypeScript

Questo articolo spiega l'oggetto window in TypeScript.

Puoi imparare le proprietà e i metodi dell'oggetto window tramite il codice.

YouTube Video

L'oggetto window in TypeScript

window è un oggetto globale in TypeScript e JavaScript che rappresenta l'intera finestra del browser. Include molte proprietà e metodi per accedere alle API del browser, manipolare il DOM (Document Object Model), utilizzare timer, storage e altre funzionalità.

tsconfig.json e l'oggetto window

In TypeScript, quando si accede all'oggetto window, le funzionalità globali specifiche del browser dispongono di definizioni di tipo che consentono il completamento automatico e il controllo dei tipi nell'editor. Grazie al file di definizione dei tipi standard di TypeScript (lib.dom.d.ts), TypeScript riconosce varie proprietà e metodi dell'oggetto window.

Quando si utilizza TypeScript, è comune posizionare un file tsconfig.json nella root del progetto. Questo file viene utilizzato per specificare le opzioni del compilatore e la portata dei file di definizione dei tipi.

Quando si lavora con window, è particolarmente importante abilitare le definizioni dei tipi del browser (definizioni dei tipi DOM). Senza questo, window e document genereranno errori di tipo.

 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}

• Specificando "lib": ["es6", "dom"], i tipi di window e document verranno riconosciuti e completati automaticamente correttamente.

Principali proprietà e metodi di window

1. window.document window.document è una proprietà utilizzata per accedere al DOM della pagina. È possibile recuperare elementi e apportare modifiche al DOM.

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

• In questo esempio viene visualizzato il titolo del documento attuale.

2. window.localStorage / window.sessionStorage window.localStorage e window.sessionStorage sono proprietà utilizzate per accedere alle funzionalità di archiviazione che consentono di salvare dati utente nel browser.

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

• In questo esempio, i dati vengono salvati nel localStorage, poi recuperati e visualizzati.

3. window.location window.location è un oggetto utilizzato per recuperare e manipolare le informazioni sull'URL corrente. È possibile effettuare reindirizzamenti e modificare gli URL.

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

• In questo esempio, l'URL viene visualizzato e l'utente viene reindirizzato a un'altra pagina.

4. window.setTimeout / window.setInterval window.setTimeout e window.setInterval sono metodi utilizzati per eseguire funzioni dopo un ritardo o a intervalli regolari.

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

• Questo codice esegue un processo che mostra un messaggio nella console dopo due secondi.

5. window.alert / window.confirm / window.prompt alert, confirm e prompt visualizzano delle finestre di dialogo per mostrare avvisi o richiedere input all'utente.

1window.alert('Alert message');

• Questo codice visualizza una finestra di avviso per notificare un messaggio.

Eventi dell'oggetto window

Poiché window fa parte del DOM, è possibile ascoltare direttamente gli eventi. In TypeScript, i tipi vengono completati automaticamente, quindi l'uso di nomi di eventi o proprietà errati causerà errori.

Evento di ridimensionamento della finestra

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

• Questo codice mostra nella console la nuova larghezza e altezza quando la dimensione della finestra cambia.

Evento della tastiera

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

• Questo codice mostra nella console il tasto premuto quando l'utente preme un tasto.

Evento di caricamento della pagina

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

• Questo codice mostra un messaggio nella console quando la pagina ha terminato il caricamento.

Note

• In TypeScript, i tipi degli oggetti evento sono dedotti automaticamente, quindi prestare attenzione a tipi come KeyboardEvent o MouseEvent rende il tuo codice più sicuro.

• Si consiglia di rimuovere i listener degli eventi quando non sono più necessari. Puoi rimuovere i listener utilizzando il metodo 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);

• Questo codice mostra un esempio di aggiunta e successiva rimozione di un listener per un evento di click.

Quando si aggiungono proprietà personalizzate

Quando si aggiungono proprietà personalizzate all'oggetto window, è necessario estendere i tipi in TypeScript per evitare errori di tipo.

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

• Questo codice è un esempio di aggiunta di una proprietà personalizzata all'oggetto window in TypeScript, assegnazione di un valore e visualizzazione dello stesso.

Precauzioni nell'uso dell'oggetto globale window

A causa del controllo rigoroso dei tipi di TypeScript, tentare di utilizzare proprietà o metodi inesistenti comporterà errori. Ad esempio, tentare di accedere a una proprietà inesistente sull'oggetto window così com'è causerà un errore, quindi è necessario estendere correttamente il tipo.

L'oggetto window svolge un ruolo centrale nell'accedere a varie funzionalità delle applicazioni browser e, in TypeScript, è possibile utilizzarlo in sicurezza sfruttando il controllo dei tipi.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video