快捷導(dǎo)航

前端React?Nextjs中的TS類型過濾實(shí)用技巧

更新時(shí)間：2022年04月26日 09:53:42 作者：「零一」

今天就來介紹一個(gè)在其它開源庫(kù)中見到的既花里胡哨，又實(shí)用的TS類型——TS類型過濾，你會(huì)發(fā)現(xiàn)這些?TS騷操作真的很重要，因?yàn)樗芎芎玫貛椭阕鲮o態(tài)類型校驗(yàn)

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

自我介紹

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

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

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

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)而外、一步一步地介紹，一定讓你們完全讀懂，讀不懂評(píng)論區(qū)來噴我（我說著玩的~）

分步介紹

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

開胃小菜

不會(huì)耽誤大家多少時(shí)間的，會(huì)的小伙伴可以直接調(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 簡(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文檔——泛型

正餐開始

剛剛介紹完"開胃小菜"，那就趁熱打鐵看一個(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 } 的類型嗎？別急，后面還有別的操作

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

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

你可以把它簡(jiǎn)單理解成 JavaScript 中訪問對(duì)象某個(gè)key對(duì)應(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)對(duì)象類型中想要類型的 key 值篩選了出來

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

最后登場(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)單，好了可以來看最終的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
	}
*/

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

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

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

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