聊一下 TS 中的交叉類型

• 2021 年 12 月 26 日
• 筆記
• typescript

交叉類型不能完全按照傳統編程中的 與 來理解。

交叉類型的定義：將多個類型合併為一個類型，包含了所有類型的特性，而且要同時滿足要交叉的所有類型。

後半段話不是很好理解，看一下接口類型和聯合類型的交叉類型就好理解了。

接口類型的交叉類型

interface Interface1 {
  id: number;
  name: string;
}

interface Interface2 {
  age: number;
}

type IntersectionType = Interface1 & Interface2;

交叉類型 IntersectionType 的類型為

{
	id: number;
  name: string;
	age: number;
}

對於接口類型來說，交叉類型確實是具有所有接口類型的所有特性。

聯合類型的交叉類型

對於聯合類型，情況就有點不同了。

type UnionA = 'px' | 'em' | 'rem' | '%';
type UnionB = 'vh' | 'em' | 'rem' | 'pt';
type IntersectionUnion = UnionA & UnionB;

交叉類型 IntersectionUnion 的類型為：

'em' | 'rem'

為什麼會這樣？可以這樣來理解。

交叉類型不僅要將所有的類型合併為一個類型，而且要同時滿足要交叉的類型。

要想同時滿足兩個接口，那麼交叉後的類型必須要同時有那兩個接口的屬性，否則接口肯定會報需要這個屬性，但是沒有提供。

要想同時滿足兩個聯合類型，那麼取的必須要是兩個聯合類型的交集，否則不可能同時滿足兩個聯合類型。

你還有更好的理解方式嗎？歡迎一起交流。