Articles
แนะนำ TypeScript
วัตถุ window ใน TypeScript

วัตถุ window ใน TypeScript

บทความนี้อธิบายถึงอ็อบเจกต์ window ใน TypeScript

คุณสามารถเรียนรู้เกี่ยวกับพร็อพเพอร์ตี้และเมธอดของอ็อบเจกต์ window ผ่านโค้ด

YouTube Video

วัตถุ window ใน TypeScript

window เป็นออบเจ็กต์แบบ global ใน TypeScript และ JavaScript ที่แทนหน้าต่างเบราว์เซอร์ทั้งหมด มีคุณสมบัติและเมธอดมากมายเพื่อเข้าถึง API ของเบราว์เซอร์, ปรับแต่ง DOM (Document Object Model), ใช้ตัวจับเวลา, พื้นที่เก็บข้อมูล และคุณสมบัติอื่น ๆ

tsconfig.json และอ็อบเจกต์ window

ใน TypeScript เมื่อเข้าถึงวัตถุ window ฟีเจอร์แบบ global เฉพาะเบราว์เซอร์จะมีการกำหนดประเภท ซึ่งช่วยให้สามารถเติมคำอัตโนมัติในตัวแก้ไขและตรวจสอบประเภทได้ ด้วยไฟล์กำหนดประเภทมาตรฐานของ 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
  • ในตัวอย่างนี้ จะมีการแสดงชื่อเรื่องของเอกสารปัจจุบัน
  1. 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 จากนั้นถูกเรียกกลับและแสดงผล
  1. 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
  • ในตัวอย่างนี้ จะแสดง URL และเปลี่ยนเส้นทางผู้ใช้ไปยังหน้ากระดานอื่น
  1. window.setTimeout / window.setInterval window.setTimeout และ window.setInterval เป็นเมธอดที่ใช้เรียกทำงานฟังก์ชันหลังจากดีเลย์หรือช่วงเวลาที่กำหนด
1window.setTimeout(() => {
2    console.log('This will be executed after 2 seconds');
3}, 2000);
  • โค้ดนี้ทำงานเพื่อแสดงข้อความที่คอนโซลหลังจากผ่านไปสองวินาที
  1. window.alert / window.confirm / window.prompt alert confirm และ prompt ใช้แสดงกล่องโต้ตอบเพื่อแจ้งเตือนหรือขอข้อมูลจากผู้ใช้
1window.alert('Alert message');
  • โค้ดนี้จะแสดงกล่องแจ้งเตือน (alert) เพื่อแจ้งข้อความ

เหตุการณ์ของอ็อบเจกต์ 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 จะทำให้โค้ดของคุณปลอดภัยมากขึ้น

  • แนะนำให้ลบ event listener เมื่อไม่จำเป็นต้องใช้งานแล้ว คุณสามารถลบตัวฟัง (listener) ได้โดยใช้เมธอด 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);
  • โค้ดนี้แสดงตัวอย่างของการเพิ่มและลบตัวฟัง (listener) สำหรับเหตุการณ์คลิก

เมื่อเพิ่มคุณสมบัติที่กำหนดเอง

เมื่อเพิ่มคุณสมบัติที่กำหนดเองให้กับวัตถุ 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!"
  • โค้ดนี้เป็นตัวอย่างของการเพิ่มพร็อพเพอร์ตี้ที่กำหนดเองในอ็อบเจ็กต์ window โดยใช้ TypeScript การกำหนดค่า และการแสดงผล

ข้อควรระวังเมื่อใช้วัตถุแบบ global window

เนื่องจากการตรวจสอบประเภทอย่างเข้มงวดของ TypeScript การพยายามใช้คุณสมบัติหรือเมธอดที่ไม่มีอยู่จะทำให้เกิดข้อผิดพลาด ตัวอย่างเช่น การพยายามเข้าถึงคุณสมบัติที่ไม่มีอยู่ในวัตถุ window จะทำให้เกิดข้อผิดพลาด ดังนั้นคุณจึงจำเป็นต้องขยายประเภทให้เหมาะสม

ดังนั้น วัตถุ window จึงมีบทบาทสำคัญในการเข้าถึงฟีเจอร์ต่าง ๆ ของแอปพลิเคชันเบราว์เซอร์ และใน TypeScript คุณสามารถใช้งานได้อย่างปลอดภัยโดยอาศัยการตรวจสอบประเภท

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video

ฟังก์ชัน Generator ใน TypeScript