類型體操之 DeepPick 工具類型
Challenge
在本次挑戰(zhàn)中，你需要實(shí)現(xiàn)一個(gè) DeepPick 工具類型，它擴(kuò)展了 TypeScript 內(nèi)置工具類型 Pick 的能力。
type Obj = {
a: number
b: string
c: boolean
obj: {
d: number
e: string
f: boolean
obj2: {
g: number
h: string
i: boolean
}
}
obj3: {
j: number
k: string
l: boolean
}
}
type DeepPick<T, K> = {}
type cases = [
Expect<Equal<DeepPick<Obj, ''>, unknown>>,
Expect<Equal<DeepPick<Obj, 'a'>, { a: number }>>,
Expect<Equal<DeepPick<Obj, 'a' | 'b'>, { a: number } & { b: string }>>,
Expect<Equal<DeepPick<Obj, 'a' | 'obj.e'>, { a: number } & { obj: { e: string } }>>,
Expect<Equal<DeepPick<Obj, 'a' | 'obj.e' | 'obj.obj2.i'>,
{ a: number } & { obj: { e: string } } & { obj: { obj2: { i: boolean } } }>>,
]在以上代碼中，我們用到了 Expect 和 Equal 這兩個(gè)工具類型，它們的實(shí)現(xiàn)代碼如下：
type Expect<T extends true> = T
type Equal<X, Y> =
(<T>() => T extends X ? 1 : 2) extends
(<T>() => T extends Y ? 1 : 2) ? true : falseSolution
在開(kāi)始實(shí)現(xiàn) DeepPick 工具類型前，我們先來(lái)簡(jiǎn)單回顧一下 TypeScript 內(nèi)置的 Pick 工具類型。
type Pick<T, K extends keyof T> = {
[P in K]: T[P];
}
由上圖可知，"" 和 "email" 字符串字面量類型不滿足 keyof User 約束，所以 TypeScript 編譯器會(huì)提示相應(yīng)的錯(cuò)誤信息。此外，Pick 工具類型還支持傳入字符串字面量類型組合成的聯(lián)合類型，比如 "name" | "age"。
下面我們先來(lái)分析 DeepPick 工具類型的前三個(gè)測(cè)試用例：
type Obj = {
a: number
b: string
c: boolean
// ...
}
type DeepPick<T, K> = {}
type cases = [
Expect<Equal<DeepPick<Obj, ''>, unknown>>,
Expect<Equal<DeepPick<Obj, 'a'>, { a: number }>>,
Expect<Equal<DeepPick<Obj, 'a' | 'b'>, { a: number } & { b: string }>>
]由以上測(cè)試用例可知，DeepPick 工具類型，不需要約束泛型變量 K 的類型。當(dāng)傳入 '' 字符串字面量類型時(shí)，只需返回 unknown 類型。而當(dāng)傳入的字符串字面量類型是 keyof T 類型的子類型時(shí)，則跟 Pick 工具類型的效果一樣。所以，我們可以先實(shí)現(xiàn)一個(gè)簡(jiǎn)單的 DeepPick 來(lái)滿足前面兩個(gè)測(cè)試用例：
type DeepPick<T, K> = K extends keyof T ? Pick<T, K> : unknown然而，第三個(gè)測(cè)試用例，需要生成 { a: number } & { b: string } 交叉類型。但我們目前返回的是 { a: number } | { b: string } 聯(lián)合類型。
Pick<Obj, "a"> | Pick<Obj, "b">
// { a: number } | { b: string }那么如何把聯(lián)合類型轉(zhuǎn)換成交叉類型呢？這時(shí)我們需要用到 UnionToIntersection 工具類型。
type UnionToIntersection<U> =
(U extends any ? (k: U) => void : never) extends (
k: infer R,
) => void
? R
: never
type DeepPick<T, K> = UnionToIntersection<K extends keyof T ? Pick<T, K> : unknown>使用了 UnionToIntersection 工具類型之后，DeepPick<Obj, 'a' | 'b'> 表達(dá)式就會(huì)輸出以下結(jié)果：
Pick<Obj, "a"> & Pick<Obj, "b">目前，我們實(shí)現(xiàn)的 DeepPick 工具類型已經(jīng)可以滿足前面三個(gè)測(cè)試用例。接下來(lái)，我們來(lái)分析剩下的兩個(gè)測(cè)試用例。
type Obj = {
a: number
obj: {
d: number
e: string
f: boolean
obj2: {
g: number
h: string
i: boolean
}
}
// ...
}
type cases = [
Expect<Equal<DeepPick<Obj, 'a' | 'obj.e'>, { a: number } & { obj: { e: string } }>>,
Expect<Equal<DeepPick<Obj, 'a' | 'obj.e' | 'obj.obj2.i'>,
{ a: number } & { obj: { e: string } } & { obj: { obj2: { i: boolean } } }>>,
]由以上的測(cè)試用例可知，我們的 DeepPick 工具類型需要支持 "obj.e" 或 "obj.obj2.i" 屬性路徑的形式。對(duì)于屬性路徑來(lái)說(shuō)，我們需要提取每一層級(jí)的屬性，然后判斷該屬性是否是當(dāng)前層級(jí)對(duì)象的屬性。要提取每一層的屬性，我們就需要利用到 TypeScript 條件類型、模板字面量類型和 infer 類型推斷。
type GetLastProperty<S extends string> = S extends `${infer U}.${infer R}` ? R : S
type P0 = GetLastProperty<"obj.e"> // "e"
type P1= GetLastProperty<"obj.obj2.i"> // "obj2.i"在以上代碼中，GetLastProperty 工具類型用于獲取屬性路徑的最后一級(jí)的屬性名。但它還不能正確處理 "obj.obj2.i" 路徑。要解決這個(gè)問(wèn)題，我們需要用到 TypeScript 的遞歸類型。
type GetLastProperty<S extends string> = S extends `${infer U}.${infer R}` ? GetLastProperty<R> : S
type P0 = GetLastProperty<"obj.e"> // "e"
type P1= GetLastProperty<"obj.obj2.i"> // "i"現(xiàn)在我們已經(jīng)知道如何處理 "obj.e" 或 "obj.obj2.i" 屬性路徑，接下來(lái)我們來(lái)更新 DeepPick 工具類型。
type DeepPick<T, K extends string> = UnionToIntersection<PickByPath<T, K>>
type PickByPath<Obj, Path> =
Path extends keyof Obj
? Pick<Obj, Path> :
Path extends `${infer Head}.${infer Tail}`
? Head extends keyof Obj ? { [P in Head]: PickByPath<Obj[Head], Tail> } : unknown
: never
type UnionToIntersection<U> =
(U extends any ? (k: U) => void : never) extends (
k: infer R,
) => void
? R
: never為了讓代碼更清晰一些，我們定義了一個(gè)新的 PickByPath 工具類型。在該工具類型中，我們用到了前面介紹過(guò)的 TypeScript 條件類型、模板字面量類型、infer 類型推斷和遞歸類型。
