什麼是動態聯合類型？讓我們來聊聊吧！

在 TypeScript 中，動態聯合類型（Dynamic Unions）超級好用，它可以讓你把不同結構的資料組合在一起變成一個很有彈性的類型！

這種用法超適合處理那些有共通屬性但在不同情境下又會有點不一樣的物件，例如：會議、聚會、還有網絡研討會等活動資料。

程式碼介紹：各種活動大集合！

type Talk = {
  title: string,
  abstract: string,
  speaker: string
}

type TechEventBase = {
  title: string,
  description: string
  date: Date,
  capacity: number,
  rsvp: number,
  kind: 'conference' | 'meetup' | 'webinar'
}

type Conference = TechEventBase & {
  location: string,
  price: number,
  talks: Talk[],
  kind: 'conference'
}

type Meetup = TechEventBase & {
  location: string,
  price: string,
  talks: Talk[],
  kind: 'meetup'
}

type Webinar = TechEventBase & {
  url: string,
  price?: number,
  talks: Talk,
  kind: 'webinar'
}

type TechEvent = Webinar | Conference | Meetup;

type EventKind =
  'conference' | 'webinar' | 'meetup'

function filterByKind(
  list: TechEvent[],
  kind: EventKind
): TechEvent[] {
  return list.filter(el => el.kind === kind)
}

我們來看看這段程式碼，這裡定義了幾種類型，代表不同的技術活動：Conference（會議）、Meetup（聚會）和 Webinar（網絡研討會）。每種類型都基於同一個基礎類型（TechEventBase），但又根據活動的不同，加入了自己的特別屬性。

• TechEventBase：這個是所有活動都會有的基本結構，包含了標題、描述、日期、容量、報名人數和活動類型。
• Conference（會議）：除了基本的活動資訊，還多了活動地點、票價（數字），還有講座列表。
• Meetup（聚會）：跟會議類似，但是票價用字串來表示，可能代表不同的費用形式。
• Webinar（網絡研討會）：除了基本的活動資料外，還有網址連結。票價是可選的，而且講座是單個的 Talk 物件。

聯合類型 TechEvent 把 Conference、Meetup 和 Webinar 三者合體，這樣我們就可以在同一個類型中處理這些不同的活動資料。

重點函式：filterByKind 簡單又厲害！

function filterByKind(
  list: TechEvent[],
  kind: EventKind
): TechEvent[] {
  return list.filter(el => el.kind === kind);
}

這個小函式示範了如何用聯合類型過濾活動清單。
只要輸入活動清單和想篩選的類型（如會議或網絡研討會），就能得到對應的活動！是不是很方便？

如何把動態聯合類型用得好？小技巧大分享！

1. 統一你的類型結構：當你定義聯合類型時，讓每種類型都盡量繼承一個共通的基礎類型，這樣可以減少重複的程式碼，讓整體代碼更乾淨、好維護！

2. 縮小類型範圍，用對屬性：用型別守衛或檢查特定屬性（像 el.kind === kind）來鎖定你想處理的類型，這樣 TypeScript 就會知道你要用的資料是什麼，避免寫出不安全的代碼！

3. 保持一致的屬性類型：不同聯合類型裡的共用屬性盡量保持一致，像是 price 在會議裡是 number，但在聚會裡是 string，這樣的差異可能會讓後續處理變得麻煩。如果可能的話，統一一下比較省心啦！

常見地雷區！別踩雷！

1. 屬性類型不一致：就像剛提到的 price，同樣的屬性用不同類型，會讓人頭痛不已。最好讓它們一致，避免在使用時碰上各種奇怪的錯誤。

2. 處理可選屬性要小心：像 Webinar 中的 price 是可選的，拿來用之前記得確認有沒有值，別到時候拿 undefined 出來讓畫面崩潰。

3. 避免亂用類型斷言：雖然用 as 可以快速轉型，但千萬別濫用！這樣可能會導致程式在運行時出錯。不如多用型別守衛或鑑別聯合類型，讓程式更安全。

結論：動態聯合類型就是這麼讚！

動態聯合類型在 TypeScript 裡是一個超級強大的工具，能讓你在面對不同資料結構時，提供型別安全和超強的彈性。只要定義清楚、屬性保持一致、並正確使用型別縮小技巧，你就能寫出易於維護、不容易出錯的程式碼！

試試看吧！

演練場

TypeScript: TS Playground - An online editor for exploring TypeScript and JavaScript

試著在你的 TypeScript 專案裡面套用這些小技巧，感受一下動態聯合類型給資料處理帶來的便利！
來吧，自己定義幾個有趣的聯合類型，看看這些小陷阱你能否輕鬆避開！

這篇文章用輕鬆又實用的方式介紹了動態聯合類型的好處，並且教你如何避開常見的地雷。
希望你看完之後會覺得：哇，原來這麼好用喔！٩(^ᴗ^)۶