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