React 中的 TS 類型過濾原來是這么做的！

作者：佚名 2022-01-14 14:19:38

今天就來介紹一個(gè)在其它開源庫中見到的既花里胡哨，又實(shí)用的TS類型——TS類型過濾

相信大家在閱讀同事寫的代碼或者優(yōu)秀的開源庫的代碼時(shí)，一定見過各種各樣的風(fēng)騷的TS寫法，不花點(diǎn)時(shí)間下去根本看不懂，換作是我們，可能就直接一個(gè) any 完事了，但是真正當(dāng)項(xiàng)目體積變大后，你會發(fā)現(xiàn)這些 TS騷操作真的很重要，因?yàn)樗芎芎玫貛椭阕鲮o態(tài)類型校驗(yàn)

今天就來介紹一個(gè)在其它開源庫中見到的既花里胡哨，又實(shí)用的TS類型——TS類型過濾

自我介紹

TS類型過濾，英文名（我自己取的）叫 FilterConditionally，這是它完整的樣子👇

type FilterConditionally<Source, Condition> = Pick<  
  Source,   
  {  
    [K in keyof Source]: Source[K] extends Condition ? K : never  
  }[keyof Source]  
>;

別看很復(fù)雜，其實(shí)非常有用，它可以從一個(gè)對象類型中過濾出你想要的，比如：

interface Example {  
    a: string; // ✅   
    b: string; // ✅    
    c: number; // ❌   
    d: boolean; // ❌   
}  
type NewType = FilterConditionally<Sample, string>  
/*  
 NewType 最終結(jié)果為：  
 {  
  a: string;  
  b: string 
 }  
*/

相信大家已經(jīng)這個(gè)類型的作用了，并且你們也很想讀懂它，沒關(guān)系，接下來由內(nèi)而外、一步一步地介紹，一定讓你們完全讀懂，讀不懂評論區(qū)來噴我（我說著玩的~）

分步介紹

涉及的知識點(diǎn)比較多，怕有些不熟悉TS的同學(xué)懵逼，先來介紹其中幾個(gè)常見的基礎(chǔ)知識點(diǎn)

開胃小菜

不會耽誤大家多少時(shí)間的，會的小伙伴可以直接調(diào)過

keyof

關(guān)鍵詞 keyof 的名字叫索引類型查詢操作符，它的作用就像它的字面意思一樣直白：xx的key值

interface Example {  
 a: string;  
  b: string;  
  c: number;  
  d: boolean;  
}  
type Keys = keyof Example   // 等價(jià)于 type Keys = 'a' | 'b' | 'c' | 'd'

你可以把 keyof 簡單理解為 JavaScript 中的 Object.keys

關(guān)鍵詞 in 可以遍歷枚舉類型，比如：

type Keys = 'a' | 'b' | 'c' | 'd'  
type Obj = {  
  [T in Keys]: string;  // 遍歷Keys，把每個(gè)key都賦值string類型  
}  
/* 等價(jià)于   
  type Obj = {  
    a: string;  
    b: string;  
   c: string;  
   d: string;  
  } 
 */

你可以把 in 簡單理解為 JavaScript 中 for...in 的 in 的作用

Conditional

第二個(gè)知識點(diǎn)是條件判斷，比如：

interface A {}  
interface B extends A {}  // B繼承于A  
// B是否繼承于A？若是，則為number類型；若不是，則為string類型  
type C = B extends A ? number : string  // 等價(jià)于 type C = number  
// A是否繼承于B？若是，則為number類型；若不是，則為string類型  
type D = A extends B ? number : string  // 等價(jià)于 type D = string

你可以把 A extends B ? number : string 簡單理解為 JavaScript 中的三元運(yùn)算符

泛型

泛型我就不多做介紹了，不太了解的小伙伴可以直接看 TS文檔——泛型[1]

正餐開始

剛剛介紹完"開胃小菜"，那就趁熱打鐵看一個(gè)簡單的類型

type MarkUnwantedTypesAsNever<Source, Condition> ={  
  [K in keyof Source]: Source[K] extends Condition ? K : never  
}

一句話介紹這個(gè)類型的作用就是：遍歷一個(gè)對象類型，將不想要的類型標(biāo)記為 never

舉個(gè)例子🌰

interface Example {  
    a: string; // ✅   
    b: string; // ✅    
    c: number; // ❌   
    d: boolean; // ❌   
}  
// 我只想要Example類型中的string類型的key，非string的就標(biāo)記為never  
type MyType = MarkUnwantedTypesAsNever<Example, string>  
/*  
 等價(jià)于：  
 type MyType = {  
  a: 'a';  
  b: 'b';  
  c: never;  
  d: never;  
 }  
*/

稍微講一下小細(xì)節(jié)，[K in keyof Example] 遍歷了 Example 這個(gè)對象類型，然后用條件判斷 Example[K] extends string ? K : never 給對應(yīng)的 key 值賦值，假設(shè)遍歷第一個(gè)key值為 a，那么 Example[K] = Example[a] = string，此時(shí)就是 string extends string ? 'a' : never，string 肯定是繼承于 string 的，所以才會有這樣一個(gè)結(jié)果

此時(shí)大家心頭一驚，為什么要把類型搞成這樣？？我們最后想要的結(jié)果不是要拿到一個(gè) { a:string; b:string } 的類型嗎？別急，后面還有別的操作

再來看一個(gè)索引訪問接口屬性的小知識點(diǎn)

type Value = {name: "zero2one"}["name"]  // 等價(jià)于 type Value = "zero2one"

你可以把它簡單理解成 JavaScript 中訪問對象某個(gè)key對應(yīng)的value

而在TS中還有另一種情況：

type Value = {  
  name: "zero2one";   
  age: 23  
}["name" | "age"]  
// 等價(jià)于 type Value = "zero2one" | 23

而值為 never 的 key 值是無法被訪問到的：

type Value = {  
  name: "zero2one";   
  age: never  
}["name" | "age"]  
// 等價(jià)于 type Value = "zero2one"

所以接下來可以看更復(fù)雜的類型了

type MarkUnwantedTypesAsNever<Source, Condition> ={  
  [K in keyof Source]: Source[K] extends Condition ? K : never  
}[keyof Source]

我們巧妙地利用 keyof 關(guān)鍵詞去遍歷訪問所有的接口屬性

// 借用一下剛才例子的結(jié)果  
type MyType = {  
   a: 'a';  
  b: 'b';  
  c: never;  
  d: never;  
}['a' | 'b' | 'c' | 'd']  
/*  
 等價(jià)于：  
 type MyType = 'a' | 'b'  
*/

到此為止，我們所做的事情就是：把目標(biāo)對象類型中想要類型的 key 值篩選了出來

別急別急，離成功就差一步之遙

最后登場的就是 Pick ，這個(gè)類型是TS內(nèi)置的，簡單了解一下它的作用

// Pick類型的實(shí)現(xiàn)  
type Pick<T, K extends keyof T> = {  
    [P in K]: T[P];  
}

你可以不去詳細(xì)地讀懂它的實(shí)現(xiàn)，只需要知道 Pick 的作用就是：篩選出類型T 中指定的某些屬性

舉個(gè)簡單的例子：

interface A {  
  a: 1;  
  b: 2;  
  c: 3;  
  d: 4;  
}  
type C = Pick<A, 'a' | 'c'>  // 等價(jià)于 type C = { a: 1; c: 3 }

是的，就是這么簡單，好了可以來看最終的BOSS了

那么最后再從 Source 中篩選出對應(yīng)屬性即可，回到本文具體的例子當(dāng)中，圖中紅框中的值上文已得到為 type MyType = 'a' | 'b'，那最后 Pick 一下就好了

interface Example {  
 a: string;  
  b: string;  
  c: number;  
  d: boolean;  
}  
// 上文得到的結(jié)果  
type MyType = 'a' | 'b'  
type Result = Pick<Example, MyType>  // 等價(jià)于 type Result = { a: string; b: string }  
// ---- 以上等價(jià)于 ---- //  
interface Example {  
    a: string; // ✅   
    b: string; // ✅    
    c: number; // ❌   
    d: boolean; // ❌   
}  
type NewType = FilterConditionally<Sample, string>  
/*  
 NewType 最終結(jié)果為：  
 {  
  a: string;  
  b: string  
 }  
*/

這就是文章開頭的結(jié)果獲取的全過程

實(shí)戰(zhàn)應(yīng)用例子

正如本文標(biāo)題所說的，TS類型過濾在很多優(yōu)秀的開源庫中是非常常見的，比如我們熟悉的React中就是：

type ElementType<PP = any> = {  
 [K in keyof JSX.IntrinsicElements]: P extends JSX.IntrinsicElements[K] ? K : never  
}[keyof JSX.IntrinsicElements] | ComponentType<P>;