TypeScript 接口 (Interfaces) 的聯合類型 (Union Types)

TypeScript 是一種 JavaScript 的超集，提供了強大的類型系統，幫助開發者在程式碼中清晰地指定變數的類型，從而提升程式碼的可讀性和可維護性。在 TypeScript 中，接口 (Interfaces) 是一個非常重要的概念，能夠讓開發者定義特定的類型，以便在程式碼中使用。

在 2025 年的最新版本中，TypeScript 進一步強化了聯合類型的功能，讓開發者能更靈活地使用這些類型。以下將介紹如何使用聯合類型來定義接口及其在實際應用中的最佳實踐。

定義接口中的聯合類型

在 TypeScript 中，接口可以使用聯合類型來定義，聯合類型允許變數接受多種類型的值。以下是定義一個 Person 接口的範例：

interface Person {
  name: string | null;
  age: number | null;
}

上述程式碼定義的 Person 接口，包含了兩個屬性：name 和 age。其中，name 屬性可以接受 string 或 null 的值，而 age 屬性則可以接受 number 或 null 的值。

使用聯合類型作為函式參數

聯合類型也可以用於函式的參數，這讓函式的設計更加靈活。以下是一個 greet 函式的範例：

function greet(name: string | null): void {
  if (name) {
    console.log(`Hello, ${name}`);
  } else {
    console.log('Hello, stranger');
  }
}

這段程式碼定義了一個 greet 函式，參數 name 可以接受 string 或 null 的值。如果傳入的是 string，則會顯示出 Hello, [name] 的訊息；如果傳入的是 null，則會顯示 Hello, stranger 的訊息。

使用聯合類型作為函式的回傳值

聯合類型同樣可以用於函式的回傳值。以下是 getName 函式的範例：

function getName(): string | null {
  const name = 'John';
  return name; // 返回值為 string
}

這段程式碼定義了一個 getName 函式，其回傳值可以是 string 或 null。如果傳回的是 string，則會返回一個字串；如果傳回的是 null，則會返回 null。

錯誤排除與最佳實踐

在使用聯合類型時，開發者可能會遇到一些常見的錯誤，例如未對不同類型的情況進行適當的處理。建議在函式中使用類型守衛（Type Guards）來確保變數的類型正確。例如，使用 if 語句檢查變數是否為 null 或 undefined，以避免在使用變數時出現錯誤。

延伸應用

聯合類型可以廣泛應用於許多場景，例如在處理 API 回傳數據時，因為這些數據的格式可能會有所不同。適當使用聯合類型能讓程式碼更具彈性。

Q&A（常見問題解答）

1. TypeScript 的聯合類型是什麼？

聯合類型允許變數可以接受多種類型的值，例如 string 或 null，這樣可以更靈活地處理不同的數據類型。

2. 如何在函式中使用聯合類型？

在函式的參數或回傳值中使用聯合類型，可以簡單地用 | 符號來定義，例如：function myFunction(param: string | number) {…}

3. TypeScript 中如何處理聯合類型的類型檢查？

可以使用類型守衛，例如使用 if 語句來確認變數的類型，以確保在使用變數時不會出現錯誤。

—