Articles
Wprowadzenie do TypeScript
Obiekt window w TypeScript

Obiekt window w TypeScript

Ten artykuł wyjaśnia obiekt window w TypeScript.

Możesz poznać właściwości i metody obiektu window poprzez kod.

YouTube Video

Obiekt window w TypeScript

window to globalny obiekt w TypeScript i JavaScript reprezentujący całe okno przeglądarki. Zawiera wiele właściwości i metod do korzystania z API przeglądarki, manipulowania DOM (Model Obiektowy Dokumentu), używania timerów, pamięci i innych funkcji.

tsconfig.json i obiekt window

W TypeScript, podczas uzyskiwania dostępu do obiektu window, globalne funkcje specyficzne dla przeglądarki mają zdefiniowane typy, co umożliwia automatyczne uzupełnianie w edytorze i sprawdzanie typów. Dzięki standardowemu plikowi definicji typów TypeScript (lib.dom.d.ts), TypeScript rozpoznaje różne właściwości i metody obiektu window.

Podczas korzystania z TypeScript, zazwyczaj plik tsconfig.json umieszcza się w katalogu głównym projektu. Ten plik służy do określenia opcji kompilatora i zakresu plików definicji typów.

Pracując z window, szczególnie ważne jest włączenie definicji typów przeglądarki (definicji typów DOM). Bez tego window i document spowodują błędy typów.

 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}
  • Po określeniu "lib": ["es6", "dom"] typy window i document będą prawidłowo rozpoznawane i uzupełniane automatycznie.

Główne właściwości i metody obiektu window

  1. window.document window.document jest właściwością służącą do uzyskania dostępu do DOM strony. Możesz pobierać elementy i wprowadzać zmiany w DOM.
1console.log(window.document.title);  // Display the title of the current document
  • W tym przykładzie wyświetlany jest tytuł bieżącego dokumentu.
  1. window.localStorage / window.sessionStorage window.localStorage i window.sessionStorage to właściwości umożliwiające korzystanie z funkcji przechowywania danych użytkownika w przeglądarce.
1window.localStorage.setItem('key', 'value');  // Save data
2const value = window.localStorage.getItem('key');  // Retrieve data
3console.log(value);  // 'value'
  • W tym przykładzie dane są zapisywane do localStorage, następnie pobierane i wyświetlane.
  1. window.location window.location to obiekt służący do pobierania i modyfikacji informacji o bieżącym adresie URL. Możesz wykonywać przekierowania i zmieniać adresy URL.
1console.log(window.location.href);  // Display the current URL
2window.location.href = 'https://example.com';  // Redirect to another page
  • W tym przykładzie wyświetlany jest adres URL, a użytkownik zostaje przekierowany na inną stronę.
  1. window.setTimeout / window.setInterval window.setTimeout i window.setInterval to metody służące do wykonywania funkcji z opóźnieniem lub w regularnych odstępach czasu.
1window.setTimeout(() => {
2    console.log('This will be executed after 2 seconds');
3}, 2000);
  • Ten kod wykonuje proces, który wyświetla wiadomość w konsoli po dwóch sekundach.
  1. window.alert / window.confirm / window.prompt alert, confirm i prompt wyświetlają okna dialogowe do pokazywania ostrzeżeń lub proszenia użytkownika o dane wejściowe.
1window.alert('Alert message');
  • Ten kod wyświetla okno alertu, aby powiadomić o wiadomości.

Zdarzenia obiektu window

Ponieważ window jest częścią DOM, możesz bezpośrednio nasłuchiwać zdarzeń. W TypeScript typy są automatycznie uzupełniane, więc użycie błędnej nazwy zdarzenia lub właściwości spowoduje błąd.

Zdarzenie zmiany rozmiaru okna 

1window.addEventListener("resize", (event) => {
2    console.log("Window resized:", window.innerWidth, window.innerHeight);
3});
  • Ten kod wyświetla w konsoli nową szerokość i wysokość, gdy zmienia się rozmiar okna.

Zdarzenie klawiatury 

1window.addEventListener("keydown", (event: KeyboardEvent) => {
2    console.log(`Key pressed: ${event.key}`);
3});
  • Ten kod wyświetla w konsoli naciśnięty klawisz, gdy użytkownik go naciśnie.

Zdarzenie ładowania strony 

1window.addEventListener("load", () => {
2    console.log("Page fully loaded");
3});
  • Ten kod wyświetla wiadomość w konsoli po zakończeniu ładowania strony.

Notatki

  • W TypeScript typy obiektów zdarzeń są wywnioskowane, więc zwracanie uwagi na takie typy jak KeyboardEvent czy MouseEvent czyni Twój kod bezpieczniejszym.

  • Zaleca się usuwanie nasłuchiwaczy zdarzeń, gdy nie są już potrzebni. Możesz usunąć nasłuchiwacze za pomocą metody 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);
  • Ten kod pokazuje przykład dodania, a następnie usunięcia nasłuchiwacza zdarzenia kliknięcia.

Podczas dodawania niestandardowych właściwości

Podczas dodawania niestandardowych właściwości do obiektu window konieczne jest rozszerzenie typu w TypeScript, aby uniknąć błędów typów.

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!"
  • Ten kod jest przykładem dodania własnej właściwości do obiektu window w TypeScript, ustawienia jej wartości i wyświetlenia jej.

Ostrzeżenia przy korzystaniu z globalnego obiektu window

Ze względu na rygorystyczne sprawdzanie typów w TypeScript próba użycia nieistniejących właściwości lub metod spowoduje błędy. Na przykład próba dostępu do nieistniejącej właściwości obiektu window w tej formie spowoduje błąd, więc musisz odpowiednio rozszerzyć typ.

W związku z tym obiekt window odgrywa centralną rolę w dostępie do różnych funkcji aplikacji przeglądarkowych, a w TypeScript możesz używać go bezpiecznie, wykorzystując sprawdzanie typów.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video

Funkcje Generatora w TypeScript