React 中的 TS 類型過(guò)濾原來(lái)是這么做的！
相信大家在閱讀同事寫(xiě)的代碼或者優(yōu)秀的開(kāi)源庫(kù)的代碼時(shí)，一定見(jiàn)過(guò)各種各樣的風(fēng)騷的TS寫(xiě)法，不花點(diǎn)時(shí)間下去根本看不懂，換作是我們，可能就直接一個(gè) any 完事了，但是真正當(dāng)項(xiàng)目體積變大后，你會(huì)發(fā)現(xiàn)這些 TS騷操作真的很重要，因?yàn)樗芎芎玫貛椭阕鲮o態(tài)類型校驗(yàn)
今天就來(lái)介紹一個(gè)在其它開(kāi)源庫(kù)中見(jiàn)到的既花里胡哨，又實(shí)用的TS類型——TS類型過(guò)濾
自我介紹
TS類型過(guò)濾，英文名（我自己取的）叫 FilterConditionally，這是它完整的樣子👇
- type FilterConditionally<Source, Condition> = Pick<
- Source,
- {
- [K in keyof Source]: Source[K] extends Condition ? K : never
- }[keyof Source]
- >;
別看很復(fù)雜，其實(shí)非常有用，它可以從一個(gè)對(duì)象類型中過(guò)濾出你想要的，比如：
- interface Example {
- a: string; // ✅
- b: string; // ✅
- c: number; // ❌
- d: boolean; // ❌
- }
- type NewType = FilterConditionally<Sample, string>
- /*
- NewType 最終結(jié)果為：
- {
- a: string;
- b: string
- }
- */
相信大家已經(jīng)這個(gè)類型的作用了，并且你們也很想讀懂它，沒(méi)關(guān)系，接下來(lái)由內(nèi)而外、一步一步地介紹，一定讓你們完全讀懂，讀不懂評(píng)論區(qū)來(lái)噴我（我說(shuō)著玩的~）
分步介紹
涉及的知識(shí)點(diǎn)比較多，怕有些不熟悉TS的同學(xué)懵逼，先來(lái)介紹其中幾個(gè)常見(jiàn)的基礎(chǔ)知識(shí)點(diǎn)
開(kāi)胃小菜
不會(huì)耽誤大家多少時(shí)間的，會(huì)的小伙伴可以直接調(diào)過(guò)
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 簡(jiǎn)單理解為 JavaScript 中的 Object.keys
in
關(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 簡(jiǎn)單理解為 JavaScript 中 for...in 的 in 的作用
Conditional
第二個(gè)知識(shí)點(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 簡(jiǎn)單理解為 JavaScript 中的三元運(yùn)算符
泛型
泛型我就不多做介紹了，不太了解的小伙伴可以直接看 TS文檔——泛型[1]
正餐開(kāi)始
剛剛介紹完"開(kāi)胃小菜"，那就趁熱打鐵看一個(gè)簡(jiǎn)單的類型
- type MarkUnwantedTypesAsNever<Source, Condition> ={
- [K in keyof Source]: Source[K] extends Condition ? K : never
- }
一句話介紹這個(gè)類型的作用就是：遍歷一個(gè)對(duì)象類型，將不想要的類型標(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è)對(duì)象類型，然后用條件判斷 Example[K] extends string ? K : never 給對(duì)應(yīng)的 key 值賦值，假設(shè)遍歷第一個(gè)key值為 a，那么 Example[K] = Example[a] = string，此時(shí)就是 string extends string ? 'a' : never，string 肯定是繼承于 string 的，所以才會(huì)有這樣一個(gè)結(jié)果
此時(shí)大家心頭一驚，為什么要把類型搞成這樣？？我們最后想要的結(jié)果不是要拿到一個(gè) { a:string; b:string } 的類型嗎？別急，后面還有別的操作
再來(lái)看一個(gè)索引訪問(wèn)接口屬性的小知識(shí)點(diǎn)
- type Value = {name: "zero2one"}["name"] // 等價(jià)于 type Value = "zero2one"
你可以把它簡(jiǎn)單理解成 JavaScript 中訪問(wèn)對(duì)象某個(gè)key對(duì)應(yīng)的value
而在TS中還有另一種情況：
- type Value = {
- name: "zero2one";
- age: 23
- }["name" | "age"]
- // 等價(jià)于 type Value = "zero2one" | 23
而值為 never 的 key 值是無(wú)法被訪問(wèn)到的：
- type Value = {
- name: "zero2one";
- age: never
- }["name" | "age"]
- // 等價(jià)于 type Value = "zero2one"
所以接下來(lái)可以看更復(fù)雜的類型了
- type MarkUnwantedTypesAsNever<Source, Condition> ={
- [K in keyof Source]: Source[K] extends Condition ? K : never
- }[keyof Source]
我們巧妙地利用 keyof 關(guān)鍵詞去遍歷訪問(wèn)所有的接口屬性
- // 借用一下剛才例子的結(jié)果
- type MyType = {
- a: 'a';
- b: 'b';
- c: never;
- d: never;
- }['a' | 'b' | 'c' | 'd']
- /*
- 等價(jià)于：
- type MyType = 'a' | 'b'
- */
到此為止，我們所做的事情就是：把目標(biāo)對(duì)象類型中想要類型的 key 值篩選了出來(lái)
別急別急，離成功就差一步之遙
最后登場(chǎng)的就是 Pick ，這個(gè)類型是TS內(nèi)置的，簡(jiǎn)單了解一下它的作用
- // Pick類型的實(shí)現(xiàn)
- type Pick<T, K extends keyof T> = {
- [P in K]: T[P];
- }
你可以不去詳細(xì)地讀懂它的實(shí)現(xiàn)，只需要知道 Pick 的作用就是：篩選出類型T 中指定的某些屬性
舉個(gè)簡(jiǎn)單的例子：
- interface A {
- a: 1;
- b: 2;
- c: 3;
- d: 4;
- }
- type C = Pick<A, 'a' | 'c'> // 等價(jià)于 type C = { a: 1; c: 3 }
是的，就是這么簡(jiǎn)單，好了可以來(lái)看最終的BOSS了
那么最后再?gòu)?Source 中篩選出對(duì)應(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
- }
- */
這就是文章開(kāi)頭的結(jié)果獲取的全過(guò)程
實(shí)戰(zhàn)應(yīng)用例子
正如本文標(biāo)題所說(shuō)的，TS類型過(guò)濾在很多優(yōu)秀的開(kāi)源庫(kù)中是非常常見(jiàn)的，比如我們熟悉的React中就是：
- type ElementType<PP = any> = {
- [K in keyof JSX.IntrinsicElements]: P extends JSX.IntrinsicElements[K] ? K : never
- }[keyof JSX.IntrinsicElements] | ComponentType<P>;
最后
開(kāi)源庫(kù)中像TS類型過(guò)濾這種場(chǎng)景太多太多了，希望今后大家遇到時(shí)能輕松讀懂。如果在屏幕前閱讀的你是后端，說(shuō)不定也能在后端的開(kāi)源框架源碼中看到它的身影呢~
