DOM Manipulation ในโลกของ TypeScript

Overview

การใช้ TypeScript กับ DOM (Document Object Model) อาจสร้างความปวดหัวในตอนแรก เพราะ TS ไม่รู้ว่า Element ที่เรา querySelector มานั้นคืออะไร (Input? Button? Div?) เราจึงต้องบอก TS ให้ชัดเจน

Key Ideas

1. Element Type Casting

เมื่อเราเลือก Element, TS จะมองเป็น Element หรือ HTMLElement ธรรมดา ซึ่งไม่มี property อย่าง .value (ของ input) หรือ .src (ของ image) วิธีแก้: ใช้ as HTMLxxxxElement เพื่อระบุ Type เจาะจง

2. Event Handling

Event Object ก็มี Type เหมือนกัน เช่น MouseEvent, KeyboardEvent, FormEvent

Example

// 1. Selecting Elements
// บอก TS ว่านี่คือ Input นะ
const emailInput = document.querySelector("#email") as HTMLInputElement;
const loginBtn = document.querySelector(".btn-login") as HTMLButtonElement;

// ตอนนี้ใช้ .value ได้แล้ว
console.log(emailInput.value);

// 2. Event Listener
loginBtn.addEventListener("click", (e: MouseEvent) => {
  e.preventDefault(); // กัน Form submit
  console.log("Logging in...");
});

Pitfalls (สิ่งที่ควรระวัง)

❌ 1. Assumed Non-Null (ใช้ ! พร่ำเพรื่อ)

เรามักใช้ ! (document.getElementById("app")!) เพื่อบอก TS ว่า "มีของแน่นอน" แต่ถ้ารันจริงแล้ว Element นั้นหายไป โปรแกรมจะพัง (Runtime Error) ✅ ควรใช้ Optional Chaining (?.) หรือ Check null ก่อน:

const app = document.getElementById("app");
if (app) {
  app.innerHTML = "Loaded";
}

References

• TypeScript DOM Type Definitions