typescript聯合類型詳解

一、typescript聯合類型判斷

在typescript中，我們可以使用聯合類型來表示值可以是幾種類型中的一種。舉個例子，我們可以這樣定義一個變量：

let strOrNum: string | number;

這裡的 | 符號就表示聯合類型，變量 strOrNum 可以是字符串或者數字類型。

在運行時，我們很容易就可以判斷這個變量的類型：

if (typeof strOrNum === "string") {
    console.log("這是一個字符串！");
} else {
    console.log("這是一個數字！");
}

這裡使用 typeof 來獲取變量的類型，在判斷的時候，我們就可以根據不同的類型輸出不同的結果。

這裡需要注意一點的是，聯合類型並不是類型之間的交集，而是其中的一種類型。例如：

let strOrNum: string | number;
strOrNum = "hello";
strOrNum = 42; // 這裡不會出錯，因為 number 也是 string | number 的一種類型

二、typescript 函數類型

函數類型也可以使用聯合類型。例如下面這個函數：

function printId(id: number | string) {
    console.log("ID是：" + id.toString());
}

這裡的參數 id 可以是數字或者字符串類型。我們也可以使用類型別名來簡化代碼：

type IdType = number | string;

function printId(id: IdType) {
    console.log("ID是：" + id.toString());
}

這裡使用了類型別名 IdType 來表示聯合類型，可以使代碼更加簡潔易懂。

三、typescript聯合類型應用場景

聯合類型在許多應用場景中都非常有用。例如，我們可以定義一個函數，接收一個可以是字符串或數組的參數：

function printText(text: string | string[]) {
    if (typeof text === "string") {
        console.log(text.toUpperCase());
    } else {
        console.log(text.join("").toUpperCase());
    }
}

printText("Hello, TypeScript!"); // 輸出：HELLO, TYPESCRIPT!
printText(["Hello", "TypeScript!"]); // 輸出：HELLOTYPESCRIPT!

這裡，我們首先判斷參數的類型是否為字符串，如果是，就輸出轉換成大寫的結果；否則，我們將數組中的元素拼接成字符串，並輸出轉換成大寫的結果。

四、typescript 聯合類型和動態類型

在 TypeScript 中，聯合類型和動態類型是非常常見的，它們可以幫助我們動態的處理一些類型信息。

比如，我們定義了一個變量 arr，它可以是字符串數組或者數字數組：

let arr: (string | number)[] = ["hello", 123];

在這種情況下，我們就可以通過數組下標來動態獲取數組元素的類型，例如：

let el1 = arr[0]; // el1 的類型就是 string | number
let el2 = arr[1]; // el2 的類型就是 string | number

這裡就充分展示了 TypeScript 動態類型的優勢，通過獲取類型信息，我們可以更加靈活的處理數據。

五、typescript類型

TypeScript 中有各種不同的類型，比如 string、number、boolean、null、undefined、Symbol 等等。在一些情況下，我們需要使用自定義類型，例如：

type UserType = {
  id: number,
  name: string,
  email: string,
  age?: number // 這裡的 ? 表示可選，即 age 可以沒有
}

let user: UserType = {
  id: 1,
  name: "Tom",
  email: "tom@example.com"
}

console.log(user.id) // 輸出 1
console.log(user.name) // 輸出 "Tom"
console.log(user.email) // 輸出 "tom@example.com"
console.log(user.age) // 輸出 undefined

這裡我們定義了一個自定義類型 UserType，來表示一個用戶對象，它包含了 id、name、email 和 age 四個屬性。

六、typescript枚舉類型

枚舉類型是 TypeScript 中非常實用的類型，它可以將一些值定義成有限的可選項，例如：

enum OrderStatus {
  Pending = "pending",
  Shipped = "shipped",
  Delivered = "delivered"
}

let status: OrderStatus = OrderStatus.Pending;

if (status === OrderStatus.Pending) {
  console.log("訂單狀態為待確認");
}

這裡我們定義了一個枚舉類型 OrderStatus，它有三個可選項：Pending、Shipped 和 Delivered。我們也可以直接使用枚舉值，例如 OrderStatus.Pending。

七、typescript類型斷言

類型斷言可以幫助我們在編譯階段確定變量類型，以避免一些潛在的類型錯誤。例如：

let strOrNum: string | number;
strOrNum = "hello TypeScript";
let len = (strOrNum as string).length;

console.log(len); // 輸出 17

這裡我們使用了類型斷言，來確定 strOrNum 是一個字符串類型，然後獲取字符串的長度。

八、typescript 類型推斷

TypeScript 可以根據變量類型的使用上下文自動推斷出變量類型。例如：

let x = 12;
let y = "hello TypeScript";

console.log(typeof x); // 輸出 "number"
console.log(typeof y); // 輸出 "string"

這裡我們沒有明確指定變量類型，但 TypeScript 可以根據後續的使用情況自動推斷出變量類型。

九、typescript映射類型

TypeScript 還提供了一種非常強大的映射類型，它可以根據已有類型實時生成新的類型。例如：

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

type ReadonlyPerson = Readonly<Person>;

let person: ReadonlyPerson = {
    name: "Tom",
    age: 20
};

person.age = 21; // 這裡會拋出一個編譯錯誤，因為 ReadonlyPerson 類型不允許修改 age 屬性

這裡我們定義了一個接口 Person，它有兩個屬性：name 和 age。然後我們使用映射類型 Readonly，來生成一個只讀版本的 Person 類型。這樣我們就可以避免不小心修改了變量值。

十、typescript高級類型選取

TypeScript 還提供了選取類型的高級特性，它可以根據一些條件來動態選取類型。例如：

interface Square {
    kind: "square";
    size: number;
}

interface Rectangle {
    kind: "rectangle";
    width: number;
    height: number;
}

type Shape = Square | Rectangle;

function area(shape: Shape) {
    if (shape.kind === "square") {
        return shape.size * shape.size;
    } else {
        return shape.width * shape.height;
    }
}

let square: Square = {
    kind: "square",
    size: 10
};

let rectangle: Rectangle = {
    kind: "rectangle",
    width: 10,
    height: 20
};

console.log(area(square)); // 輸出 100
console.log(area(rectangle)); // 輸出 200

這裡我們定義了兩個接口 Square 和 Rectangle，表示正方形和矩形。然後我們使用聯合類型 Shape 來表示這兩種形狀，最後定義了一個函數 area，來計算它們的面積。在 area 函數中，我們根據 kind 屬性來動態的選擇計算面積的方式。

總結

typescript聯合類型、枚舉類型、類型斷言、類型推斷、映射類型、高級類型選取等，在 TypeScript 中都非常實用，可以幫助我們更好的處理和管理類型，避免因類型錯誤引起的 bug。