Type Casting (類型轉換)

範例：在 TypeScript 中獲取 a 標籤的 href 屬性

當我們想要在事件處理函數中獲取被點擊的 <a> 標籤的 href 屬性時，通常會嘗試使用 event.target.href 來獲取。但在 TypeScript 中，由於強類型的特性，會出現以下問題：

問題

TypeScript 不確定 event.target 是什麼類型的 HTML 元素，因為事件可能發生在任何 DOM 元素上。所以直接訪問 .href 屬性會導致類型錯誤，因為 TypeScript 認為 event.target 的類型是 EventTarget，而這個類型並沒有 href 屬性。

解決方案：Type Casting (類型轉換)

正確的做法是使用類型轉換，明確告訴 TypeScript 這個 event.target 是一個 HTMLAnchorElement 類型：

(event.target as HTMLAnchorElement).href

這樣 TypeScript 就知道我們確信此元素是一個 <a> 標籤，所以它有 href 屬性。

使用場景例子

function handleLinkClick(event: MouseEvent) {
  event.preventDefault(); // 阻止默認的跳轉行為
  
  // 使用類型轉換取得 href 值
  const href = (event.target as HTMLAnchorElement).href;
  
  console.log('Link clicked:', href);
  // 可以根據 href 做更多處理...
}