TS 類型體操入門 —— 實現 DeepKeyOf

背景

我們知道，在 ts 中提供了keyof關鍵字讓我們能夠獲取一個 interface 的全部的 key

interface Stu {
    name: string;
    age: number;
}

type keys = keyof Stu; // type keys = 'name' | 'age'

但並沒有提供下面這樣的遞歸地獲取一個 interface 的 key 的能力

interface Stu {
    name: string;
    age: number;
    nest: {
        a: {
            b: number;
        }
    }
}

// expected
type deepKeys = deepkeyof Stu; // type deepKeys = 'name' | 'age' | 'nest' | 'nest.a' | 'nest.a.b'

可實際上這種能力非常有用，比如在類似於 lodash.get 的這種場景下，如果能夠有類似於deepkeyof這樣的能力，我們就可以直接將 path 的可能參數都提前限定下來，而不只是簡單的設置爲 string。

let obj = {
    a: {
        b: {
            c: '2333'
        }
    }
}

_.get(obj, 'a.b.c'); // '2333'

實現思路

1. 什麼是類型體操

類型體操 (type gymnastics) 一詞最早出現於 Haskell 的文檔 [1] 中，我認爲可以簡單理解爲類型編程，和我們平時使用 JavaScript、C++ 等語言處理各種值的編程其實沒有本質區別，只不過在類型編程中，處理的值是類型。

在 JS 中，我們在處理的值就是 JS 這門語言爲我們提供的值（包括各種基礎數據類型及複雜類型），JS 同時給我們提供了一系列的操作符，例如下面的 + 、* ，以及像 split 這樣的內置的 API。

let a = 1;
let b = a + 2;
let c = b * 5;

let s = 'typescript';
let t = s.split('s');

在 TypeScript 的類型編程中，我們所處理的值變成了類型這一事物，查看以下代碼

type Temp = {
    name: string;
    age: number;
}

type keys = keyof Temp; // type keys = 'name' | 'age'

這裏出現的值有 Temp ，操作符 有 keyof 。這裏使用了 keyof 來提取 Temp 中的 key。

可能看到這裏，你對類型編程還是沒有一個具體的概念，我們做以下對比來感受一下類型編程和我們平時通常意義認爲的編程的區別。

定義變量

在類型編程中，我們定義的 “變量” 是不可變的，我們只能去生成新的變量，而不能去修改已有的變量，這一點和函數式編程語言類似。

// in JavaScript
let a = 1;
const b = 10;

// in type gymnastics
type a = 1;

a = 2;
type b = 2;

條件

類型編程中只有表達式，沒有 “語句” 這一概念，也就沒有所謂的條件語句，不過有extends ? :表達式可以幫助我們達到類似的目的。

// in JavaScript
let max;
let a = 10, b = 20;
if (a > b) {
    max = a;
} else {
    max = b;
}

// in type gymnastics
type temp = 10;

type isNumber<T> = T extends number ? true : false;

type res = isNumber<temp>; // type res = true;

循環

類型編程中沒有循環，不過可以用遞歸來模擬。

// in JavaScript
let index = 1;

let n = 10;

while(n--) {
    index *= 10;
}

// in type gymnastics
type path = 'a.b.c';

type Split<T extends string> = T extends `${infer A}.${infer B}` ? A | Split<B> : T;

type test = Split<path>; // type test =  a  |  b  |  c

函數

ts 的類型編程中，泛型相當於是函數，只不過泛型本身沒法當做參數被傳遞給泛型

function temp(arg: string) {
    return arg + '123';
}

type Temp<T extends string> = `${T}123`;

2. TS 提供的部分類型操作

keyof
索引類型 [2] 獲取一個 interface 某個字段對應的類型

interface Stu {
    name: string;
    age: number;
    nest: {
        a: {
            b: number;
        }
    }
}

type temp = Stu['nest'];  // type temp = { a: { b: number; }; }

type temp1 = Stu['next' | 'name'] // type temp1 = string | { a: { b: number; }; }

模板字符串 [3] 構造各種各樣的字符串

type key1 = 'nest';
type key2 = 'a';
type key3 = `${key1}.${key2}`; // type key3 =  nest.a 

type key4 = 'name' | 'nest'; // union用於模板字符串也會得到一個union
type key5 = `get${key4}`; // type key5 = 'getname' | 'getnest'

// 如果模板字符串的輸入中出現了never，會導致整個字符串變成never
type key6 = `get${never}`; // type key6 = never

extends + infer 從某個 type 中解構出其組成部分

type UnpackPromise<T extends Promise<any>> = T extends Promise<infer A> ? A : never;

type test = UnpackPromise<Promise<number>> // type test = number

泛型 + 遞歸 ts 類型編程的基礎

type path = 'a.b.c';

type Split<T extends string> = T extends `${infer A}.${infer B}` ? A | Split<B> : T;

type test = Split<path>; // type test =  a  |  b  |  c

mapped type 基於一個已有的 interface 構造一個新的 interface

interface Temp {
    name: string;
    age: number;
}

type ToFunc = {
    [k in keyof Temp]: (arg: Temp[k]) => void;
}

// type ToFunc = {
//     name: (arg: string) => void;
//     age: (arg: number) => void;
// }

// 甚至能把原interface中的key也改了
type ToGetFunc = {
    [k in keyof Temp as `get${k}`]: (arg: Temp[k]) => void;
}

// type ToGetFunc = {
//     getname: (arg: string) => void;
//     getage: (arg: number) => void;
// }

3. 順序執行方案

回到我們最初的問題，實現DeepKeyOf，我們可以先嚐試使用順序執行的方式實現

使用 keyof 拿到第一層的 key

interface Stu {
    name: string;
    age: number;
    nest: {
        a: {
            b: number;
        }
    }
}

type keys1 = keyof Stu; // type keys1 = 'name' | 'age' | 'nest';

拿到第一層的 key 以後，用來獲取第二層的類型

type types2 = Stu[keys1]; // type types2 = string | number | { a: { b: number; } }

將第二層中仍然有多層結構的 type 過濾出來

type OnlyObject<T extends any> = T extends Record<string, any> ? T : never;
type types2_needed = OnlyObject<types2>; // type types2_needed = { a: { b: number; } }

把第二層的 key 拿出來

type keys2 = keyof types2_needed; // type keys2 =  a

使用步驟 4 拿到的 key 重複步驟 2
最終，我們可以拿到每一層的 key

type keys1 = 'name' | 'age' | 'nest';
type keys2 = 'a';
type keys3 = 'b';

嘗試一番後發現使用這樣順序執行的方式似乎是沒法做到把不同層之間的 key 正確連接起來的，比如 keys2 中的'a'並不知道自己是由 keys1 中哪個 key 對應的 type 中獲取的。

4. 遞歸方案

雖然順序執行的方式不能解決問題，但是可以爲我們的遞歸的解決方案提供思路。我們的輸入是一個任意的 interface，輸出是它的各級的 key 連接以後的一個 union。

// input
interface Stu {
  name: string;
  nest: {
    a: {
      b: number;
    };
    tt: {
      c: boolean;
    };
  };
  info: {
    score: number;
    grade: string;
  };
}

// output
'name' | 'nest' | 'nest.a' | 'nest.a.b' | 'nest.tt' | 'nest.tt.c' | 'info' |'info.score' | 'info.grade'

在順序執行步驟的第五步中，我們需要重複第二步，可以猜測我們現在需要解決的這個問題是可以分解爲同類的子問題的。

仔細觀察，可以發現我們的問題可以這樣來表示

假設我們有一個泛型 DeepKeyOf 可以獲取我們需要的 key

type DeepKeyOf<T> = xxx;
type test = DeepKeyOf<Stu> // type test = 'name' | 'nest' | 'nest.a' | 'nest.a.b' | 'nest.tt' | 'nest.tt.c' | 'info' |'info.score' | 'info.grade'

其內部實現大概會是下面這樣

type DeepKeyOf<T> = {
    [k in keyof T]: k;
}[keyof T];

type DeepKeyOf<T> = {
    [k in keyof T]: k |  `  ${k}  .  ${DeepKeyOf<T[k]>}  `  ; 
}[keyof T]

這一步可能比較跳，我們簡單解釋一下。

粉色部分用到的是前面有講到過的mapped type，它基於傳入DeepKeyOf的T來構造一個新的 interface，它的 key 和 T 一致，value 變成了k和 `${k}.${DeepKeyOf<T[k]>}` 的 union
黃色部分用到的是上文提到過的index access type，它取出粉色部分對應的 interface 的全部字段對應的類型

我們再將 Stu 類型傳入，手動把這個泛型展開

interface Stu {
  name: string;
  nest: {
    a: {
      b: number;
    };
    tt: {
      c: boolean;
    };
  };
  info: {
    score: number;
    grade: string;
  };
}

type res = DeepKeyOf<Stu>;
type res = {
    name: 'name' | `${'name'}.${DeepKeyOf<string>}`;
    nest: 'nest' | `${'nest'}.${DeppKeyOf<{a: {b: number;} tt: {c: boolean;}}>}`;
    info: 'info' | `${'info'}.${DeepKeyOf<{score: number; grade: string;}>}`;
}['name' | 'nest' | 'info'];
type res = 'name' | `${'name'}.${DeepKeyOf<string>}` | 'nest' | `${'nest'}.${DeppKeyOf<{a: {b: number;} tt: {c: boolean;}}>}` | 'info' | `${'info'}.${DeepKeyOf<{score: number; grade: string;}>}`;

如果我們的DeepKeyOf實現正確的話，DeepKeyOf<string> 應當返回never，DeppKeyOf<{a: {b: number;} tt: {c: boolean;}}>應當返回 'a' | 'a.b' ，DeepKeyOf<{score: number; grade: string;}> 應當返回 'score' | 'grade'

never 是 union “|” 這一運算中的幺元 [4]，任何 type 與 never 做 union 運算均爲其本身

如：'name' | 'nest' | never === 'name' | 'nest'

補充細節

對於非原始類型，我們應該直接返回 never，如DeepKeyOf<string> 應當返回never，我們修改DeepKeyOf實現如下

type DeepKeyOf<T> = T extends Record<string, any> ? {
    [k in keyof T]: k | ` ${k} . ${DeepKeyOf<T[k]>} ` ;
}[keyof T] : never;

上面的代碼實際上放到 IDE 裏，會提示我們這樣一個錯誤

type DeepKeyOf<T> = T extends Record<string, any> ? {
    [k in keyof T]: k extends string ? k | ` ${k} . ${DeepKeyOf<T[k]>} `  : never ;
}[keyof T] : never;

最終我們就得到了我們需要的 DeepKeyOf 泛型

type DeepKeyOf<T> = T extends Record<string, any> ? {
    [k in keyof T]: k extends string ? k | `${k}.${DeepKeyOf<T[k]>}` : never;
}[keyof T] : never;

interface Stu {
  name: string;
  nest: {
    a: {
      b: number;
    };
    tt: {
      c: boolean;
    };
  };
  info: {
    score: number;
    grade: string;
  };
}

type res = DeepKeyOf<Stu>; // "name" | "nest" | "info" | "nest.a" | "nest.tt" | "nest.a.b" | "nest.tt.c" | "info.score" | "info.grade"

總結

以上，我們通過實現一個簡單的DeepKeyOf瞭解了類型編程這一概念，它和我們通常意義認爲的編程其實沒有本質區別，只是編程中操作的值不同，使用的運算符不同。在實際業務開發過程中，利用類型編程的知識，可以把一些類型收窄到我們實際需要的範圍，比如需要一個整數形式的字符串，我們完全可以使用`${bigint}`，而不是簡單的使用一個 string。收窄到實際需要的範圍不僅可以提高開發體驗（類型收窄後，IDE 可以相應地提供智能提示，也可以避免大量類型模板代碼），也能提高代碼的可讀性（比如一個函數的輸入輸出可以更加明確）。

ps：如果你對類型編程感興趣，可以嘗試一下這個體操庫 [5]，這個 repo 裏有比較多有用的體操題，並且提供了難度分級，同時可以查看其他人的 solution，幫助我們快速上手類型體操。

參考資料

[1]

Haskell 的文檔: https://wiki.haskell.org/index.php?title=OOP_vs_type_classes&oldid=5437#Type_classes_is_a_sort_of_templates.2C_not_classes

[2]

索引類型: https://www.typescriptlang.org/docs/handbook/2/indexed-access-types.html

[3]

模板字符串: https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html

[4]

幺元: https://zh.wikipedia.org/zh-cn/%E5%96%AE%E4%BD%8D%E5%85%83

[5]

這個體操庫: https://github.com/type-challenges/type-challenges/blob/master/README.md

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/6K2DXQ9XxyDbWLe7zw67ag

背景