來源：https://juejin.cn/post/705294...
作者：Angus安格斯
前言
最近在寫React時定義變數型別時，無意點到了ElementType，然後在node_modules/@types/react/index.d.ts 中發現了這段程式碼：
牛啊，雖然我沒太看懂，但是就是覺得挺牛的。
Google一下
但是後來我們一Google，發現網上管這個叫型別過濾，是一個實用的TS寫法。\
來看下面這個?：
interface Example{
a:string;
b:number;
c:number;
d:string;
...
}
複製程式碼我們有一個Example的介面，但是我們們現在想對這個介面做一些處理，只希望留下型別為string的屬性，這樣我們們應該咋做？就可以使用我們們自己定義的FilterType。
type newExample = FilterType<Example,string> // {a:string;d:string;...}
複製程式碼我們們來看看FilterType是如何實現的：
type FilterType<Source, Types> = Pick<
Source,
{
[K in keyof Source]: Source[K] extends Types ? K : never
}[keyof Source]
>;
複製程式碼分析
首先我們們先來看看程式碼中出現的幾個utility types。（大佬直接跳過）
in
in 可以遍歷列舉型別，類似 for...in
type Example = 'a' | 'b' | 'c' | 'd'
type Obj = {
[T in Example]: string; // 遍歷Example，把每個key都賦值string型別
}
/* 等價於
type Obj = {
a: string;
b: string;
c: string;
d: string;
}
*/
複製程式碼keyof
TS官方文件中把它稱作索引型別查詢操作符，其實就是取到型別的key，類似Object.keys() 雖然我不知道這樣類比對不對。
interface Example {
a: string;
b: string;
c: number;
d: boolean;
}
type Keys = keyof Example // 等價於 type Keys = 'a' | 'b' | 'c' | 'd'
複製程式碼條件判斷
interface A {
a:string;
}
interface B extends A {
b:string;
}
// B是否繼承於A？若是，則為number型別；若不是，則為string型別
type C = B extends A ? number : string // 等價於 type C = number
複製程式碼開始剖析
先看一個?，揭開她的面紗，不，是口罩：
type Mask<source,types> = {
[K in keyof source]:source[K] extends types ? K : never;
}
interface Example{
name:string;
height:number
}
type newType = Mask<Example,string> // { name:'name'; height:never}
複製程式碼這時候我們們看到一個{ name:'name'; height:never} ,what??? 這有啥用？
別急！接下來我們們繼續看下面這個例子,揭開她的外套：\
來看一個可以記在筆記本上的小知識點：索引訪問介面屬性
type person = {
name:"Angus";
height:185;
}["name" | "height"]
複製程式碼等價於：
type person = "Angus" | 185
複製程式碼注意的是，當value為never時，就會訪問不到
type person = {
name:"Angus";
height:185;
girlFriend:never;
}["name" | "height" | "girlFriend"]
複製程式碼等價於
type person = "Angus" | 185
複製程式碼(singleDog的自嘲
那知道了索引訪問介面屬性有啥用呢？來看下面這個?,揭開她的clothes：
type Clothes<source,types> = {
[K in keyof source]:source[K] extends types ? K : never;
}[keyof source]
interface Example{
name:string;
height:number;
home:string
}
type newType = Clothes<Example,string> // type newType = "name | home"
複製程式碼這樣我們就能拿到我們想要的型別的聯合型別。\
最後一步，我們們揭開*\
hold on ,我們們先了解一下Pick。\
Pick是在一個型別物件中，挑選幾個型別，組成一個新的的型別。
interface Angus{
name:string;
height:number;
wight:number;
}
type newAngus = Pick<Angus,'name' | 'height'> //{name:string;height:number}
複製程式碼它的實現：
type Pick<T,K extends keyof T> = {
[P in K] : T[P];
}
複製程式碼然後我們來看Google上的那個?：
type FilterType<Source, Types> = Pick<
Source,
{
[K in keyof Source]: Source[K] extends Types ? K : never
}[keyof Source]
>;
複製程式碼是不是茅廁頓開！！！通過Pick就可以挑選我們想要的屬性了。
{
[K in keyof Source]: Source[K] extends Types ? K : never
}[keyof Source]
複製程式碼這兩行的程式碼就能拿到我們想要的屬性。再通過Pick一下就完事。有沒有被秀到？
擴充
那我們們再來看看TS中其他的一些工具型別吧
Omit
Omit(a,b) 接收兩個引數，第一個是要編輯的基本型別，第二個是你要刪除的型別。
type Person = {
name:string;
sex:string;
}
type newPerson = Omit<Person,'name'> // {sex:string}
複製程式碼看看它咋實現的：
type Omit <T,K extends keyof any> = Pick<T,Exclude<keyof T,K>>;
複製程式碼Partial
Partial 可以快速把某個介面型別中定義的屬性變成可選的(Optional)
type Person = {
name:string;
sex:string;
}
type newPerson = Partial<Person> // {name?:string;sex?:string}
複製程式碼看看它咋實現的：\
type Partial <T> = {
[P in keyof T]?: T[P]
}
複製程式碼Exclude
用於刪除型別集合中的指定型別.
type a = string | number
type newPerson = Exclude<a,string> //number
複製程式碼實現：
type Exclude<T, U> = T extends U ? never : T
複製程式碼Readonly
將介面所有屬性變為只讀的.
type Person = {
name:string;
sex:string;
}
type newPerson = Readonly<Person>
// type newPerson = {readonly name: string;readonly sex: string;}
複製程式碼實現：
type Readonly<T> = { readonly [P in keyof T]: T[P]; }
複製程式碼ReturnType
ReturnType的作用是用於獲取函式 T 的返回型別。\
type T0 = ReturnType<() => string>; // string
type T1 = ReturnType<(s: string) => void>; // void
type T2 = ReturnType<() => T>; // {}
type T3 = ReturnType<() => T>; // number[]
type T4 = ReturnType; // any
type T5 = ReturnType; // any
type T6 = ReturnType; // Error
type T7 = ReturnType; // Error
複製程式碼實現：
type ReturnType any> = T extends (...args: any) => infer R ? R : any;
複製程式碼Parameters
Parameters的作用是用於獲取函式 T 的引數型別。
type getuserInfo = (user: string) => void
// Parameters<T>的作用是用於獲取函式 T 的引數型別。
type ParametersUserInfo = Parameters<getuserInfo>
複製程式碼就先介紹到這裡啦，目前大四，明年就要去網易搬磚啦，碼字不易，隨手點個讚唄，感謝大佬。
結語
我是林三心，一個熱心的前端菜鳥程式設計師。如果你上進，喜歡前端，想學習前端，那我們們可以交朋友，一起摸魚哈哈，摸魚群，加我請備註【思否】
