什麼是交集型別？

交集型別是一種 TypeScript 中的進階型別，允許將多個型別結合成一個新型別。這表示新型別將包含所有原型別的屬性和方法，並允許在不同型別之間進行組合。在 TypeScript 中，交集型別使用 & 符號來定義。

交集型別的用途

物件合併

當我們需要合併不同物件的屬性時，可以使用交集型別。這可以讓我們輕鬆地建立一個新物件，其中包含了多個不同物件的屬性，而不必手動複製每個屬性。

type Admin = {
  name: string;
  privileges: string[];
};

type Employee = {
  name: string;
  startDate: Date;
};

type ElevatedEmployee = Admin & Employee;

const employeeInfo: ElevatedEmployee = {
  name: '肉鬆',
  privileges: ['建立伺服器'],
  startDate: new Date(),
};

介面合併

當我們需要定義具有多種介面時，也能透過交集型別來實現介面的合併。

第一種：interface 搭配 &

interface Admin {
  name: string;
  privileges: string[];
}

interface Employee {
  name: string;
  startDate: Date;
}

type ElevatedEmployee = Admin & Employee;

const employeeInfo: ElevatedEmployee = {
  name: '肉鬆',
  privileges: ['建立伺服器'],
  startDate: new Date(),
};

第二種：interface 搭配 extends

我們可以使用 extends 來合併多個介面達到具有交集的概念。

特別注意：extends 主要用於介面的定義，而不是在變數或物件上。交集型別 & 則用於合併變數或物件，兩者在實現交集概念時非常類似，但它們的用途不同，應根據我們的需求選擇適當的方法。

interface Admin {
  name: string;
  privileges: string[];
}

interface Employee {
  name: string;
  startDate: Date;
}

interface ElevatedEmployee extends Admin, Employee {}

const employeeInfo: ElevatedEmployee = {
  name: '肉鬆',
  privileges: ['建立伺服器'],
  startDate: new Date(),
};

聯合型別合併

當 Combinable 型別是 string 或 number 的聯合型別，Numeric 型別是 number 或 boolean 的聯合型別時，Universal 型別是 Combinable & Numeric，僅有 number 型別在兩個聯合型別中交集。因此，Universal 型別只能接受 number 型別的值。

type Combinable = string | number;
type Numeric = number | boolean;
type Universal = Combinable & Numeric; // number 型別

const universal1: Universal = 30; // 通過
const universal2: Universal = '肉鬆'; // TypeScript 報錯，類型 'string' 不可指派給類型 'number'
const universal3: Universal = true; // TypeScript 報錯，類型 'boolean' 不可指派給類型 'number'

函式參數

交集型別在函式參數中的應用讓函式能夠接受多種不同型別的輸入。這意味著當我們希望函式處理多個型別中的屬性時，可以使用交集型別來定義參數的型別，以便接受這些不同型別的組合。

type Color = {
  colorType: string;
};

type Shape = {
  shapeType: string;
  angle: number;
};

type Figure = Color & Shape;

function createFigure(figure: Figure) {
  console.log(`${figure.colorType}的${figure.shapeType}，有${figure.angle}個角`);
}

createFigure({ colorType: '紅色', shapeType: '圓形', angle: 0 }); 
// 通過，紅色的圓形，有0個角
createFigure({ colorType: '藍色', shapeType: '三角形', angel: 3 });
// TypeScript 報錯，Figure 物件中沒有 angel 屬性，藍色的三角形，有undefined個角

本日重點

1. 我們可以使用 & 來定義交集型別。
2. & 與 extends 兩者在實現交集概念時相似，但用途不同。extends 用於介面定義，擴展多個介面；& 用於合併變數或物件，以建立一個包含多個型別屬性的新合併實例。
3. 當使用交集型別搭配聯合型別時，要注意新定義的交集型別只會包含那些在所有參與型別中都存在的型別，換句話說，只有交集的型別會被保留。

參考

• TypeScript - 交集型別