TypeScript 的條件型別使用範例詳解

2022-08-23 18:01:46

TypeScript 的條件型別使用方式

我們可以使用 TypeScript 中的條件型別來根據邏輯定義某些型別，就像是在編寫程式碼那樣。

它採用的語法和我們在 JavaScript 中熟悉的三元運運算元很像：condition ? ifConditionTrue : ifConditionFalse。

我們來看看他是怎麼工作的。

假設我們有一個值，這個值可以表示使用者的出生日期或者年齡。

如果是出生日期，那他的型別應該是 string。
如果是年齡，那他的型別是 number。

我們來定義這三種型別。

type Dob = string;
type Age = number;
type UserAgeInformation<T> = T extends number ? number : string;

Dob 和 Age 不需要多解釋，我們來解釋一下 UserAgeInformation。

它接受一個泛型，可以是任何型別。如果 T extends number 為 true，就意味著傳入的型別是 number 型別，我們就把 UserAgeInformation 設定為 number 型別。否則的話就設定為 string 型別。

我們在使用的時候可以這樣：

let userAge:UserAgeInformation<Age> = 100;
let userDob:UserAgeInformation<Dob> = '12/12/1945';

條件型別和 keyof 組合

除了上面介紹的用法，我們還可以通過檢查是否擴充套件了一個物件來更進一步。比如，假設我們的客戶有兩種型別：Horse 和 User。

兩種型別的客戶都有 age、name 兩個欄位。

User 型別的客戶還有一個 address 欄位，它表示了詳細的地址。
Horse 型別的客戶有 location 兩個欄位，它只是表示一個大概的位置。

我們來定義這幾種型別：

type User = {
    age: number,
    name: string,
    address: string
}
type Horse = {
    age: number,
    name: string
}
type UserAddress = {
    addressLine1: string,
    city: string,
    country: string,
}
type HorseAddress = {
    location: 'farm' | 'savanna' | 'field' | 'other'
}

在未來，我們還可能會有其他型別的客戶，所以我們可以通過檢查 T 是否具有 address 屬性，如果有，我們使用 UserAddress 型別，否則使用 HorseAddress 型別。

type AddressComponents<T> = T extends { address: string } ? UserAddress : HorseAddress
let userAddress:AddressComponents<User> = {
    addressLine1: "123 Fake Street",
    city: "Boston",
    country: "USA"
}
let horseAddress:AddressComponents<Horse> = {
    location: 'farm'
}

T extends { address: string } 的含義是檢查 T 是否具有 address 屬性。

在條件返回中使用 T

在三元表示式的條件返回中，我們也可以使用 T。

比如下面的例子：

type User = {
    age: number,
    name: string,
    address: string
}
type Horse = {
    age: number,
    name: string
}
type UserType<T> = T extends { address: string } ? T : Horse
let myUser: UserType<User> = {
    age: 104, 
    name: "John Doe",
    address: "123 Fake Street"
}

T 被定義為 User，當我們呼叫 UserType 時，myUser 的型別就是 User，並且需要具有這種型別中所定義的欄位。

在型別輸出中使用 T 時的聯合型別

如果我們在這裡傳遞一個聯合型別：

type UserType<T> = T extends { address: string } ? T : string
let myUser: UserType<User | Horse> = {
    age: 104, 
    name: "John Doe",
    address: "123 Fake Street"
}

myUser 的型別會變成是 User|string，因為 User 通過了條件檢測，但是 Horse 沒有通過，所以它的型別是字串。

如果我們以某種方式修改 T，比如把它設定為陣列。所有 T 的值都會被單獨修改。

type User = {
    age?: number,
    name: string,
    address?: string
}
type Horse = {
    age?: number,
    name: string
}
// 如果 T 包含型別是 string 的 name 屬性，就會返回 T[]
type UserType<T> = T extends { name: string } ? T[] : never;
// myUser 的型別是 User[]|Horse[]，因為 User 和 Horse 都具有 name 屬性
let myUser:UserType<User | Horse> = [{ name: "John" }, { name: "Horse" }]

在這裡我們已經簡化了 User 和 Horse，它們只留下了必須需要的 name 欄位。在條件型別中，兩種型別都包含了 name。

所以兩者都會返回 true，並且返回的型別是 T[]，由於兩者都返回 true，所以 myUser 的型別是 User[]|Horse[]，所以我們可以簡單地提供一個包含 name 屬性的物件陣列。

這種行為通常很好，但是在某些情況下，我們希望返回一個陣列。

在這種情況下，如果我們想避免這樣分佈型別，可以在周圍新增 { name: string }。

type User = {
    age?: number,
    name: string,
    address?: string
}
type Horse = {
    age?: number,
    name: string
}
// 我們避免分佈型別，因為 T 和 { name: string} 都在方括號中
type UserType<T> = [T] extends [{ name: string }] ? T[] : never;
// 這樣現在的型別不同了，它是 (User|Horse)[]
let myUser:UserType<User | Horse> = [{ name: "John" }, { name: "Horse" }]

通過使用方括號，我們的型別已經轉為 (User|Horse)[]，而不是 User[]|Horse[]。

這在某些特殊的場景中很有用。但是條件型別會增加複雜性，不可以濫用。

使用條件型別推斷型別

我們也可以在使用條件時使用 infer 關鍵字。

假設我們有兩種型別，一種用於數位陣列，另一種用於字串陣列。

在這個例子中，infer 將會推斷陣列中每個專案的型別，並返回正確的型別：

type StringArray = string[]
type NumberArray = number[]
type MixedArray = number[] | string[]
type ArrayType<T> = T extends Array<infer Item> ? Item: never
// 因為 NumberArray 中專案的型別是 number，所以 myItem1 是 number 型別
let myItem1: ArrayType<NumberArray> = 45
// 因為 StringArray 中專案的型別是 string，所以 myItem2 是 string 型別
let myItem2: ArrayType<StringArray> = 'string'
// 因為 MixedArray 中專案的型別是 number|string，所以 myItem3 是 number|string 型別
let myItem3: ArrayType<MixedArray> = 'string'

我們在條件型別中定義了一個新的引數 Item，它是 extends Array 中的子項 T。

但是我們必須傳入陣列，它才會有效，因為我們使用的是 Array。

如果 T 不是陣列，那麼 ArrayType 的型別將會是 never。