前端開發(fā)者對(duì)Javascript中的三元表達(dá)式應(yīng)該都很熟悉，利用三元表達(dá)式可以很方便實(shí)現(xiàn)根據(jù)輸入值得到不同的輸出結(jié)果。 TypeScript對(duì)類型也提供了類似的語法，和Javascript唯一的區(qū)別就是TypeScript操作的是數(shù)據(jù)類型。
基本語法
基本使用
T extends U ? X : Y;
TUXY四個(gè)是占位符，分別表示四種類型；T extends U表示T類型能被賦值給U類型，這里還涉及到TS類型兼容性。
幾個(gè)簡(jiǎn)單的例子
- 判斷類型是否是
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
重點(diǎn)：例子中的
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進(jìn)階之keyof中的例子
- 實(shí)現(xiàn)
Omit
type MyOmit<T, K> = { [P in keyof T as P extends K ? never : P]: T[P] };
- 給對(duì)象類型添加屬性
type AppendToObject<T, U extends keyof any, V> = {[P in keyof T | U]: P extends keyof T ? T[P] : V}
條件類型可復(fù)合使用
例子如下：獲取類型的名稱
type TypeName<T> = T extends string
? 'string'
: T extends number
? 'number'
: T extends boolean
? 'boolean'
: T extends undefined
? 'undefined'
: T extends Function
? 'function'
: 'object';
這個(gè)使用方法應(yīng)該也比較好理解，不過多解釋了。
條件類型的分發(fā)特性
如果對(duì)條件類型的分發(fā)特性不太熟悉的同學(xué)可能會(huì)對(duì)Exclude,Extract等工具類型的實(shí)現(xiàn)有疑問，接下來我就使用Exclude來具體介紹下條件類型的分發(fā)特性。
重點(diǎn)：條件的分發(fā)特性主要針對(duì)的
T是聯(lián)合類型
Exclude的具體執(zhí)行邏輯
type Exclude<T, U> = T extends U ? never : T;
type C5 = Exclude<'a' | 'b' | 'c', 'a' | 'b'> // 'c'
解釋：
- 對(duì)聯(lián)合類型
T進(jìn)行分發(fā)變成:'a' extends 'a'| 'b' ? never : 'a' | 'b' extends 'a'| 'b' ? never : 'b' | 'c' extends 'a'| 'b' ? never : 'c'
- 分別計(jì)算的結(jié)果是
never ｜ never ｜ 'c'- 最后的結(jié)果:
c
條件類型的分發(fā)必須是裸類型
裸類型是指沒有被數(shù)組，元組和Promise等包裝過的類型。
對(duì)比例子如下:
type IsString2<T> = [T] extends string[] ? "IS a String" : "Not a String";
type C7 = IsString2<string | number>;
// 結(jié)果: "Not a String"
type IsString3<T> = T extends string ? "IS a String" : "Not a String";
type C8 = IsString3<string | number>;
// 結(jié)果: "IS a String" | "Not a String"
IsString2中的[T]被數(shù)組包裝過了，不會(huì)進(jìn)行分發(fā)，直接判斷[string | number] extends string[], 得到了"Not a String"；IsString3中的[T]沒被包裝過，會(huì)進(jìn)行分發(fā),得到"IS a String" | "Not a String"；
never是空的聯(lián)合類型
如果判斷一個(gè)類型是否是never，可能最開始想到的是:
type IsNever<T> = T extends never ? true : false; // ?
這個(gè)是錯(cuò)誤的，因?yàn)?never代表的是空的聯(lián)合類型，相當(dāng)于沒有，所有不會(huì)執(zhí)行，最后也是never類型，不會(huì)得到true。
正確的解決邏輯是將never變成元組類型就可以了。
type IsNever<T> = [T] extends [never] ? true : false; // ?
一些案例
獲取數(shù)組類型的第一個(gè)元素的類型
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 具有某個(gè)類型的屬性
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>
// 結(jié)果：
{
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; 具體解釋地址
判斷兩個(gè)類型完全相等
export type Equal<X, Y> =
(<T>() => T extends X ? 1 : 2) extends
(<T>() => T extends Y ? 1 : 2) ? true : false
解釋：通過構(gòu)造一個(gè)函數(shù)類型來對(duì)比兩個(gè)函數(shù)類型是否完全相等。具體解釋地址
infer
條件類型語法中可以使用infer進(jìn)行類型推斷，下篇主要介紹這部分內(nèi)容。
先來個(gè)官方的獲取參數(shù)類型的例子:
type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never;
