淺談TS聯合類型

一、TS聯合類型高級特點

在TS中，聯合類型是指使用豎線 | 將多個類型合併成一個新類型。一個聯合類型的值可以是多種不同類型中的一種。

聯合類型的高級特點在於，它可以用來描述對象的屬性。比如，我們可以利用聯合類型來描述一個對象可能存在的不同屬性類型。舉個例子：

interface A {
  type: "A",
  name: string
}

interface B {
  type: "B",
  age: number
}

type C = A | B;

function getNameOrAge(obj: C): string | number {
  if (obj.type === "A") {
    return obj.name;
  } else {
    return obj.age;
  }
}

在上面的例子中，介面 A 和介面 B 都有一個 type 屬性，且它們的取值不同。通過將 A 和 B 組合成聯合類型 C，我們可以創建一個參數為 C 類型的函數 getNameOrAge。函數的邏輯是如果參數的 type 屬性為 “A”，則返回 name 屬性的值；否則返回 age 屬性的值。這樣，我們就可以通過一個函數處理不同類型的對象了。

二、TS聯合類型推導

TS 可以推導聯合類型，但只能通過處理一系列條件來實現。在下面的例子中，變數 fibArr 的類型是一個由 number 和 string 組成的聯合類型：

const fibArr = [0, 1, "1", 2, "3"]
// fibArr: (string | number)[]

而在下面的例子中，類型會被 TS 推導為單獨一個類型，而不是聯合類型：

const fibNumArr = [0, 1, 1, 2, 3] // fibNumArr: number[]

因為數組中只存在 number 類型的值，所以類型被 TS 推斷為 number[]。

三、TS聯合類型轉JS數組

在將 TS 代碼轉換為 JS 代碼後，聯合類型就會消失。因為 JS 中並沒有聯合類型的概念，聯合類型會被轉換成數組。在下面的例子中，TS 中的聯合類型將被轉換成 JS 中的數組：

type Test = string | number;
// Test: (string | number)

const test: Test = "Hello world";
// 已被轉換成 TypeScript

const testArray = ["Hello world", 42];
// 已被轉換成 JavaScript

四、TS聯合類型還叫什麼

在一些語言中，聯合類型也被稱作可選類型或者選擇類型。這些術語都可以用來描述同樣的概念，都可以用來表示一個變數可以接受多種不同類型的值。

五、TS聯合類型交叉類型

在 TS 中，交叉類型使用 & 符號連接多個類型，表示它們的結果為多個類型的並集。舉個例子：

interface A {
  typeA: string;
}

interface B {
  typeB: number;
}

type C = A & B;

const obj: C = {
  typeA: "string",
  typeB: 1
};
// obj: {typeA: string, typeB: number}

在這個例子中，一個交叉類型 C 包含類型 A 和類型 B 的屬性。通過定義交叉類型，我們可以創建一個既包含 A 又包含 B 的對象。

六、TS聯合類型和交叉類型

在 TS 中，可以使用聯合類型和交叉類型來實現更複雜的類型。比如，在下面的例子中，我們組合使用了聯合類型和交叉類型：

interface A {
  type: "A";
  name: string;
}

interface B {
  type: "B";
  age: number;
}

interface C {
  type: "C";
  flag: boolean;
}

type D = (A | B) & C;

const obj: D = {
  type: "A",
  name: "test",
  flag: true
};
// obj: {type: "A", name: string, flag: boolean}

在這個例子中，我們創建了聯合類型 A | B 和交叉類型 A | B & C 組成的類型 D。類型 D 表示只有 type 為 “A” 或 “B” 並且同時具有屬性 name 和 flag 的對象。這就是聯合類型和交叉類型結合的威力。

七、TS聯合類型轉元組

如果我們想把一個類型變成包含多種不同類型的元組，可以使用類似下面的方法：

type Test = [number] | [string];
// Test: [number] | [string]

const testNum: Test = [42];
const testString: Test = ["Hello, world!"];

在這個例子中，我們定義了一個元組類型 Test，它包含了一個數字或者字元串。變數 testNum 的類型為 [number]，變數 testString 的類型為 [string]。這樣一來，我們就可以創建一個類型為 【數字或字元串】類型的數組了。

八、TS聯合類型表達式

在 TS 中，可以使用表達式通過聯合類型來表示一個具體的類型。在下面的例子中，這個聯合類型通過表達式來表示一個類型是字元串並且長度為 10：

type Test = string & { length: 10 };
// Test: string & { length: 10 }

const test: Test = "Hello world";
// 'test'不具備類型'{ length: 10 }'

這段代碼的效果是約束了 test 變數的值必須是字元串類型，並且它的長度必須為 10。如果不符合這兩個條件中的任何一個，TS 將會報錯。

九、TS聯合類型轉換成對象

在 TS 中，聯合類型常常被用於轉換成對象。在下面的例子中，我們使用了 TS 的 typeof 和 keyof 運算符來轉換聯合類型為對象：

type Member = "name" | "age" | "email";
type Person = {
  [K in Member]?: string;
}

const person: Person = {
  name: "John",
  age: "42",
  email: "john@example.com",
  address: "Test street 1"
};
// person: {name?: string, age?: string, email?: string}

在這個例子中，我們使用了 Member 類型表示一個人的成員，比如姓名、年齡和電子郵件等。我們通過 Person 類型將 Member 類型轉換成一個包含可選屬性的對象，並且限制屬性的值只能是字元串類型。如果想要將 person 對象轉換成包含 Member 類型的數組，可以使用 keyof 運算符實現：

type MemberArray = Array<keyof Person>;
// MemberArray: (keyof Person)[]

結束語

總之，聯合類型在 TS 中有著非常重要的地位，可以幫助我們在開發過程中處理多種不同類型的對象，給開發帶來了很大的方便和便利。希望通過以上的講解能讓讀者對於 TS 聯合類型產生更深層次的理解和認知。