TypeScript 的條件類型使用示例詳解
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。
總結
如果你剛接觸到 TypeScript 的條件類型,你可能會覺得很疑惑。但是它解決瞭某些特定情況下編寫類型比較復雜的一種解決方式。
如果你在某個項目中看到它,或者簡化你想你的項目代碼,它或許很有用。
以上就是TypeScript 的條件類型使用詳解 的詳細內容,更多關於TypeScript 條件類型的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- 教你用typescript類型來推算斐波那契
- 如何通俗的解釋TypeScript 泛型
- typescript快速上手的基礎知識篇
- 深入理解typescript中的infer關鍵字的使用
- TypeScript保姆級基礎教程