前端開發者對Javascript中的三元表達式應該都很熟悉，利用三元表達式可以很方便實現根據輸入值得到不同的輸出結果。 TypeScript對類型也提供了類似的語法，和Javascript唯一的區別就是TypeScript操作的是數據類型。
基本語法
基本使用
T extends U ? X : Y;
TUXY四個是占位符，分別表示四種類型；T extends U表示T類型能被賦值給U類型，這里還涉及到TS類型兼容性。
幾個簡單的例子
- 判斷類型是否是
string類型
type IsString<T> = T extends string ? true : false;
type C11 = IsString<string>; // true
type C22 = IsString<number>; // false
type C1 = IsString<"1">; // true
type C2 = IsString<1>; // false
重點：例子中的
true和false是類型(字面量類型)，不是值。
- 如果是
Animal類型得到number類型，否則為string類型
interface Animal {
live(): void;
}
interface Dog extends Animal {
woof(): void;
}
type IsAnimal<T> = T extends Animal ? number : string;
type C3 = IsAnimal<Dog> // number
type C4 = IsAnimal<RegExp> // string
TS進階之keyof中的例子
- 實現
Omit
type MyOmit<T, K> = { [P in keyof T as P extends K ? never : P]: T[P] };
- 給對象類型添加屬性
type AppendToObject<T, U extends keyof any, V> = {[P in keyof T | U]: P extends keyof T ? T[P] : V}
條件類型可復合使用
例子如下：獲取類型的名稱
type TypeName<T> = T extends string
? 'string'
: T extends number
? 'number'
: T extends boolean
? 'boolean'
: T extends undefined
? 'undefined'
: T extends Function
? 'function'
: 'object';
這個使用方法應該也比較好理解，不過多解釋了。
條件類型的分發特性
如果對條件類型的分發特性不太熟悉的同學可能會對Exclude,Extract等工具類型的實現有疑問，接下來我就使用Exclude來具體介紹下條件類型的分發特性。
重點：條件的分發特性主要針對的
T是聯合類型
Exclude的具體執行邏輯
type Exclude<T, U> = T extends U ? never : T;
type C5 = Exclude<'a' | 'b' | 'c', 'a' | 'b'> // 'c'
解釋：
- 對聯合類型
T進行分發變成:'a' extends 'a'| 'b' ? never : 'a' | 'b' extends 'a'| 'b' ? never : 'b' | 'c' extends 'a'| 'b' ? never : 'c'
- 分別計算的結果是
never ｜ never ｜ 'c'- 最后的結果:
c
條件類型的分發必須是裸類型
裸類型是指沒有被數組，元組和Promise等包裝過的類型。
對比例子如下:
type IsString2<T> = [T] extends string[] ? "IS a String" : "Not a String";
type C7 = IsString2<string | number>;
// 結果: "Not a String"
type IsString3<T> = T extends string ? "IS a String" : "Not a String";
type C8 = IsString3<string | number>;
// 結果: "IS a String" | "Not a String"
IsString2中的[T]被數組包裝過了，不會進行分發，直接判斷[string | number] extends string[], 得到了"Not a String"；IsString3中的[T]沒被包裝過，會進行分發,得到"IS a String" | "Not a String"；
never是空的聯合類型
如果判斷一個類型是否是never，可能最開始想到的是:
type IsNever<T> = T extends never ? true : false; // ?
這個是錯誤的，因為 never代表的是空的聯合類型，相當于沒有，所有不會執行，最后也是never類型，不會得到true。
正確的解決邏輯是將never變成元組類型就可以了。
type IsNever<T> = [T] extends [never] ? true : false; // ?
一些案例
獲取數組類型的第一個元素的類型
type First<T extends any[]> = T extends never[] ? never : T[0];
type arr1 = ['a', 'b', 'c']
type C6 = First<arr1> // 'a'
注意 這里的
'a','b','c'，是類型，是類型，是類型；
Pick 具有某個類型的屬性
type PickByType<T, U> = { [P in keyof T as T[P] extends U ? P : never]: T[P] };
type OnlyBoolean = PickByType<{
name: string
count: number
isReadonly: boolean
isEnable: boolean
}, boolean>
// 結果：
{
isReadonly: boolean;
isEnable: boolean;
}
判斷Any
export type IsAny<T> = 0 extends (1 & T) ? true : false
type IsAny<T> = 0 extends (1 & T) ? true : false
type C9 = IsAny<any>; // true
type C10 = IsAny<string>; // false
解釋:
any & 1 = any,0 extends any成立，所以返回true; 具體解釋地址
判斷兩個類型完全相等
export type Equal<X, Y> =
(<T>() => T extends X ? 1 : 2) extends
(<T>() => T extends Y ? 1 : 2) ? true : false
解釋：通過構造一個函數類型來對比兩個函數類型是否完全相等。具體解釋地址
infer
條件類型語法中可以使用infer進行類型推斷，下篇主要介紹這部分內容。
先來個官方的獲取參數類型的例子:
type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never;
