跳至主要内容

DOM 的 Type

為什麼需要知道 DOM 的 Type​

  • 減少錯誤：編譯時就設定好型別再存取屬性，編譯時就先提早發現錯誤
  • 更精準的自動完成：有固定的型別 IDE 會更好的給出自動完成的選單
  • 正確使用 API/事件：Event、MouseEvent、…提供不同欄位，精準的型別能避免存取不存在的屬性
  • 型別窄化與控制流程更安全
  • 更好重構與可讀：div 換成 input 的時候，型別錯誤會主動顯示需要調整的部份
// 1) 先確認不是 null
const el = document.getElementById('title');
if (el) el.textContent = 'Hi';

// 2) 指定是輸入框，才能用 value
const age = document.querySelector('#age') as HTMLInputElement;
age.value = '18';

// 3) 事件有不同資料
window.addEventListener('click', (e: MouseEvent) => console.log(e.clientX));
window.addEventListener('keydown', (e: KeyboardEvent) => console.log(e.key));

練習做做看​

export const titleRef = document.querySelector(".title");
export const inpTxtRef = document.querySelector("input.inpTxt");
export const sendRef = document.querySelector(".send");
點擊查看解答
export const titleRef = document.querySelector<HTMLHeadingElement>(".title");
export const inpTxtRef = document.querySelector<HTMLInputElement>("input.inpTxt");
export const sendRef = document.querySelector<HTMLButtonElement>(".send");