TypeScript 中的 window 對象

本文說明了 TypeScript 中的 window 物件。

你可以通過程式碼來了解 window 物件的屬性和方法。

YouTube Video

TypeScript 中的 window 對象

window 是 TypeScript 和 JavaScript 中代表整個瀏覽器窗口的全域對象。它包含許多屬性和方法，用於訪問瀏覽器 API、操作 DOM（文件對象模型）、使用計時器、存儲和其他功能。

tsconfig.json 與 window 物件

在 TypeScript 中，訪問 window 對象時，瀏覽器特定的全域功能具有類型定義，從而啟用編輯器的自動完成和類型檢查。由於 TypeScript 的標準類型定義文件（lib.dom.d.ts），TypeScript 能夠識別 window 對象的各種屬性和方法。

使用 TypeScript 時，通常會在專案的根目錄下放置 tsconfig.json 檔案。這個檔案用於指定編譯器選項以及型別定義檔案的範圍。

當操作 window 時，特別需要啟用瀏覽器型別定義 (DOM 型別定義)。若未設置，window 和 document 會產生型別錯誤。

 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}

• 指定 "lib": ["es6", "dom"] 後，window 和 document 的型別就會被正確辨識並能自動補全。

window 的主要屬性和方法

1. window.document window.document 是用來存取頁面 DOM 的屬性。您可以檢索元素並更改 DOM。

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

• 在此範例中，會顯示當前文件的標題。

2. window.localStorage / window.sessionStorage window.localStorage 與 window.sessionStorage 是用於存取瀏覽器儲存功能、儲存用戶資料的屬性。

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

• 在此範例中，數據會儲存到 localStorage，然後再被取出並顯示。

3. window.location window.location 是用於取得與操作當前 URL 資訊的物件。您可以執行重定向並更改 URL。

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

• 在此範例中，會顯示當前網址，並將用戶重新導向至另一個頁面。

4. window.setTimeout / window.setInterval window.setTimeout 和 window.setInterval 是用於延遲執行函式或定期執行函式的方法。

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

• 此程式碼會在兩秒後於主控台輸出一條訊息。

5. window.alert / window.confirm / window.prompt alert、confirm、和 prompt 用於顯示對話框，以提示訊息或要求用戶輸入。

1window.alert('Alert message');

• 此程式碼會顯示提示對話框來通知訊息。

window 物件的事件

由於 window 是 DOM 的一部分，也可以直接監聽事件。在 TypeScript 中，型別會自動補全，使用錯誤的事件名稱或屬性會產生錯誤。

視窗調整大小事件

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

• 當視窗大小變化時，此程式碼會於主控台輸出新的寬度與高度。

鍵盤事件

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

• 當使用者按下按鍵時，此程式碼會於主控台輸出被按下的鍵。

頁面載入事件

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

• 當頁面載入完成後，此程式碼會於主控台輸出一條訊息。

注意事項

• 在 TypeScript 中，事件物件的型別會被推斷出來，因此注意像是 KeyboardEvent 或 MouseEvent 等型別，能讓你的程式碼更安全。

• 建議在不需要事件監聽時將其移除。你可以使用 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);

• 此程式碼示範如何新增後再移除點擊事件的監聽器。

添加自訂屬性時

在 window 對象中添加自訂屬性時，必須在 TypeScript 中進行類型擴展以避免類型錯誤。

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

• 此程式碼是示範如何在 TypeScript 中為 window 物件新增自訂屬性、設定值並顯示出來。

使用全域 window 對象時的注意事項

由於 TypeScript 的嚴格類型檢查，嘗試使用不存在的屬性或方法會導致錯誤。例如，嘗試直接訪問 window 對象中不存在的屬性會導致錯誤，因此需要正確地擴展類型。

因此，window 對象在訪問瀏覽器應用的各種功能中起到關鍵作用，而在 TypeScript 中，您可以利用類型檢查來安全地使用它。

您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。

YouTube Video