TS 泛型進階

拿下泛型，TS 還有什麼難的嗎？

大家好，我是沐華，本文將剖析 TS 開發中常見工具類型的源碼實現及使用方式，並且搭配與內容結合的練習，方便大家更好的理解和掌握。本文目標：

更加深入的理解和掌握泛型
更加熟練這些內置工具類型在項目中的運用

Exclude

Exclude<T, U>：作用簡單說就是把 T 裏面的 U 去掉，再返回 T 裏還剩下的。T 和 U 必須是同種類型 (具體類型 / 字面量類型)。如下

type T1 = Exclude<string | number, string>;
// type T1  = number; 

// 上面這個肯定一看就懂，那下面這樣呢

type T2 = Exclude<'a' | 'b' | 'c', 'b' | 'd'>;
// type T2  = 'a' | 'c';

怎麼就剩個 a | c 了？這怎麼執行的？

先看一張圖

三元表達式大家都知道，不是返回 a 就是返回 b，這麼算的話，這個 some 的類型應該是 b 纔對呀，可這個結果是 a | b 又是怎麼回事呢，這都是由於 TS 中的拆分或者說叫分發機制導致的

簡單說就是聯合類型並且是裸類型就會產生分發，分發就會把聯合類型中的每一個類型單獨拿去判斷，最後返回結果組成的聯合類型，a | b 就是這麼來的，這個特性在本文後面會提到多次所以鋪墊一下，這也是爲什麼反 Exclude 放在開頭的原因

結合 Exclude 的實現和例子來理解下

// 源碼定義
type Exclude<T, U> = T extends U ? never : T;

// 例子
type T2 = Exclude<'a' | 'b' | 'c', 'b' | 'd'>;
// type T2  = 'a' | 'c';

上面例子中的執行邏輯：

由於分發會把聯合類型中的每一個類型單獨拿去判斷的原因，會先把 T ，也就是前面 a | b | c 給拆分再單獨放入 T extends U ? never : T 判斷
第一次判斷 a(T就是a) ，U 就是 b | d ，T 並沒有繼承自 U，判斷爲假，返回 T 也就是 a
第二次判斷放入 b 判斷爲真，返回 never，ts 中的 never 我們知道就是不存在值的意思，連 undefined 都沒有，所以 never 會被忽略，不會產生任何效果
第三次判斷放入 c，判斷爲假，和 a 同理
最後將每一個單獨判斷的結果組成聯合類型返回，never 會忽略，所以就剩下 a | c

總之就是：如果 T extends U 滿足分發的條件，就會把所有單個類型依次放入判斷，最後返回記錄的結果組合的聯合類型

Extract

Extract<T, U>：作用是取出 T 裏面的 U ，返回。作用和 Exclude 剛好相反，傳參也是一樣的

看例子理解 Extract

type T1 = Extract<'a' | 'b' | 'c', 'a' | 'd'>;
// type T1  = 'a';

// 源碼定義
type Extract<T, U> = T extends U ? T : never

和 Exclude 源碼對比也只是三元表達式返回的 never : T 對調了一下，執行原理也是一樣一樣兒的，就不重複了

Omit

Omit<T, K>：作用是把 T(對象類型) 裏邊的 K 去掉，返回 T 裏還剩下的

Omit 的作用和 Exclude 是一樣的，都能做類型過濾並得到新類型。

不同的是 Exclude 主要是處理聯合類型，且會觸發分發，而 Omit 主要是處理對象類型，所以自然的這倆參數也不一樣。

用法如下

// 這種場景 type 和 interface 是一樣的，後面就不重複說明了
type User = {
    name: string
    age: number
}
type T1 = Omit<User, 'age'>
// type T1 = { name: string }

源碼定義

// keyof any 就是 string | number | symbol
type Omit<T, K extends keyof any> = { [P in Exclude<keyof T, K>]: T[P]; }

首先第一個參數 T 要傳對象類型， type 或 interface 都可以
第二個參數 K 限制了類型只能是 string | number | symbol，這一點跟 js 裏的對象是一個意思，對象類型的屬性名只支持這三種類型
in 是映射類型，用來映射遍歷枚舉類型。大白話就是循環、循環語法，需要配合聯合類型來對類型進行遍歷。in 的右邊是可遍歷的枚舉類型，左邊是遍歷出來的每一項
用 Exclude 去除掉傳入的屬性後，再遍歷剩下的屬性，生成新的類型返回

示例解析：

type User = {
    name: string
    age: number
    gender: string
}
type Omit<T, K extends keyof any> = { [P in Exclude<keyof T, K>]: T[P]; }
type T1 = Omit<User, 'age'>
// type T1 = { name: string, gender: string }

我們調用 Omit 傳入的參數是正確的，所以就分析一下後面的執行邏輯：

Exclude<keyof T, K> 等於 Exclude<'name'|'age'|'gender', 'age'>，返回的結果就是 'name'|'gender
然後遍歷 'name'|'gender'，第一次循環 P 就是 name，返回 T[P] 就是 User['name']
第二次循環 P 就是 gender，返回 T[P] 就是 User['gender']，然後循環結束
結果就是 { name: string, gender: string }

Pick

Pick<T, K> ：作用是取出 T(對象類型) 裏邊兒的 K，返回。

好像和 Omit 剛好相反，Omit 是不要 K ，Pick 是隻要 K

傳參方式和 Omit 是一樣的，就不贅述了，用法示例：

type User = {
    name: string
    age: number
    gender: string
}
type T1 = Pick<User, 'name' | 'gender'>
// type T1 = { name: string, gender: string }

源碼定義

type Pick<T, K extends keyof T> = { [P in K]: T[P]; }

可以看到等號左邊做了泛型約束，限制了第二個參數 K 必須是第一個參數 T 裏的屬性。
如果第二個參數傳入聯合類型，會觸發分發，以此來確保準確性，聯合類型中的每一個單獨類型都必須是第一個對象類型中的屬性 (不限制的話右邊就要出錯了)
參數都正確之後，等號右邊的邏輯其實就是和 Omit 一模一樣的了，直接遍歷 K，取出返回就完事兒了

練習一

請利用本文上述內容完成：基於如下類型，實現一個去掉了 gender 的新類型，實現方法越多越好

type User = {
    name: string
    age: number
    gender: string
}

這個？

type T1 = { name: string, age: number }

？？？

我寫了幾個，歡迎補充：

type T1 = Omit<User, 'gender'>
type T2 = Pick<User, 'name' | 'age'>
type T3 = Pick<User, Exclude<keyof User, 'gender'>>
type T4 = { [P in 'name' | 'age'] : User[P] }
type T5 = { [P in Exclude<keyof User, 'gender'>] : User[P] }

Record

Record<K, T>：作用是自定義一個對象。K 爲對象的 key 或 key 的類型，T 爲 value 或 value 的類型。

你有沒有這樣用過 ↓

const obj:any = {}

反正我有，其實用 Record 定義對象，在工作中還是很好用的，而且非常靈活，不同的對象定義上也會有一點區別，如下

空對象

// never，會限制爲空對象
// any 指的是 string | number | symbol 這幾個類型都行
type T1 = Record<any, never>
let obj1:T1 = {}  // ok
// let obj1:T1 = {a:1} 這樣不行，只能是空對象

任意對象

// 任意對象，unknown 或 {} 表示對象內容不限，空對象也行
type T1 = Record<any, unknown>
// 或
type T1 = Record<any, {}>
let obj2:T1 = {}  // ok
let obj3:T1 = {a:1}  // ok

自定義對象 key

type keys = 'name' | 'age'
type T1 = Record<keys, string>
let obj1:T1 = {
    name: '沐華',
    age: '18'
    // age: 18  報錯，第二個參數 string 表示 value 值都只能是 string 類型
}

// 如果需要 value 是任意類型，下面兩個都行
type T2 = Record<keys, unknown>
type T3 = Record<keys, {}>

自定義對象 value

type keys = 'a' | 'b'
// type 或 interface 都一樣
type values<T> = {
    name?: T,
    age?: T,
    gender?: string
}

// 自定義 value 類型
type T1 = Record<keys, values<number | string>>
let obj:T1 = {
    a: { name: '沐華' },
    b: { age: 18 }
}

// 固定 value 值
type T2 = Record<keys, 111>
let obj1:T2 = {
    a: 111,
    b: 111
}

源碼定義

type Record<K extends any, T> = { [P in K]: T; }

左邊限制了第一個參數 K 只能是 string | number | symbol 類型，可以是聯合類型，因爲右邊遍歷 K 了，然後遍歷出來的每個屬性的值，直接賦值爲傳入的第二個參數

Partial

Partial<T>：作用生成一個將 T(對象類型) 裏所有屬性都變成可選的之後的新類型

示例如下：

type User = {
    name: string
    age: number
}
type T1 = Partial<User>
// 簡單說 T1 和 T2 是一模一樣的
type T2 = {
    name?: string
    age?: number
}

源碼定義

type Partial<T> = { [P in keyof T]?: T[P]; }

這下看源碼定義的是不是特別簡單，就是循環傳進來的對象類型，給每個屬性加個 ? 變成可選屬生

Required

Required<T>：作用和 Partial<T> 剛好相反，Partial 是返回所有屬性都是非必填的對象類型，而 Required 則是返回所有屬性都是必填項的對象類型。參數 T 也是一個對象類型。

示例：

type User = {
    name?: string
    age?: number
}
type T1 = Required<User>
// 簡單說 T1 和 T2 是一模一樣的
type T2 = {
    name: string
    age: number
}

源碼定義

type Required<T> = { [P in keyof T]-?: T[P]; }

和 Partial 的源碼定義相比基本一樣的，只是這裏多了個減號 -，沒錯，就是減去的意思，-? 就是去掉 ?，然後就變成必填項了，這樣解釋是不是很好理解

Readonly

Readonly<T> ：作用是返回一個所有屬性都是隻讀不可修改的對象類型，與 Partial 和 Required 是非常相似的。參數 T 也是一個對象類型。

示例：

type User = {
    name: string
    age?: number
}
type T1 = Readonly<User>
// 簡單說 T1 和 T2 是一模一樣的
type T2 = {
    readonly name: string
    readonly age?: number
}

type Readonly<T> = { readonly [P in keyof T]: T[P]; }

怎麼樣？看到這是不是越發覺得源碼的類型定義越看越簡單了

我：那是不是說把所有隻讀類型，全都變成非只讀就只需要 -readonly 就行了？

你：是的，說得很對，就是這樣的

練習二

從上面幾個工具類型的源碼定義中我們可以發現，都只是簡單的一層遍歷，就好像 js 中的淺拷貝，比如有下面這樣一個對象

type User = {
    name: string
    age: number
    children: {
        boy: number
        girl: number
    }
}

要把這樣一個對象所有屬性都改成可選屬性，用 Partial 就行不通了，它只能改變第一層，children 裏的所有屬性都改不了，所以請寫一個可以實現的類型，功能類似深拷貝的意思

先稍微想想再往下看答案喲

寫出來一個的話，Partial 、Required 、 Readonly 的 “深拷貝” 類型是不是就都有了呢

想一下

// Partial 源碼定義
type Partial<T> = { [P in keyof T]?: T[P]; }

// 遞歸 Partial
type DeepPartial<T> = T extends object ? { [P in keyof T]?: DeepPartial<T[P]> }:T;

外層再加了一個三元表達式，如果不是對象類型直接返回，如果是就遍歷；然後屬性值改成遞歸調用就可以了

// 遞歸 Required
type DeepRequired<T> = T extends object ? { [P in keyof T]-?: DeepRequired<T[P]> }:T;

// 遞歸 Readonly
type DeepReadonly<T> = T extends object ? { readonly [P in keyof T]: DeepReadonly<T[P]> }:T;

NonNullable

NonNullable<T>：作用是去掉 T 中的 null 和 undefined。T 爲字面量 / 具體類型的聯合類型，如果是對象類型是沒有效果的。如下

type T1 = NonNullable<string | number | undefined>;
// type T1 = string | number

type T2 = NonNullable<string[] | null | undefined>;    
// type T2 = string[]

type T3 = {
    name: string
    age: undefined
}
type T4 = NonNullable<T3> // 對象是不行的

源碼定義

// 4.8版本之前的版本
type NonNullable<T> = T extends null | undefined ? never : T;
// 4.8
type NonNullable<T> = T & {}

TS 4.8版本 之前的就是用一個三元表達式來過濾 null | undefined。而在 4.8 版本直接就是 T & {}，這是什麼原理呢？其實是因爲這個版本對 --strictNullChecks 做了增加，這主要體現還是在聯合類型和交叉類型上，爲什麼這麼說？

在 js 中都知道萬物皆對象，原型鏈的最終點的正常對象就是 Object 了 (null 算不正常的)，數據類型都是在原型鏈中繼承於 Object 派生出來的。

在 ts 中也一樣，由於 {} 是一個空對象，所以除了 null 和 undefined 之外的基礎類型都可以視作繼承於 {} 派生出來的。或者說如果一個值不是 null 和 undefined 就等於 這個值 & {} 的結果，如下

type T1 = 'a' & {};  // 'a'
type T2 = number & {};  // number
type T3 = object & {};  // object
type T4 = { a: string } & {};  // { a: string }
type T5 = null & {};  // never
type T6 = undefined & {};  // never

如果 T & {} 中的 T 不是 null/undefined 就可以認爲它肯定符合 {} 類型，就可以把 {} 從交叉類型中去掉了，如果是，則會被判爲 never，而 never 是會被忽略的 (上面 Exclude 源碼定義裏有提到)，所以在結果裏自然就排除掉了 null 和 undefined。

還有如果 T & {} 中的 T 是聯合類型，是會觸發分發的，這個就不再解釋了

練習三

請實現一個能去掉對象類型中 null 和 undefined 的類型

// 需要把如下類型變成 { name: string }
type User = {
    name: string
    age: null,
    gender: undefined
}

// 實現如下
type ObjNonNullable<T> = { [P in keyof T as T[P] extends null | undefined ? never : P]: T[P] };

type T1 = ObjNonNullable<User>
// type T1 = { name: string }

這裏出現了一個本文第一次出現的關鍵字 as，我們知道它可以用來斷言，在 ts 4.1 版本可以在映射類型裏用 as 實現鍵名重新映射，達到過濾或者修改屬性名的目的，如果指定的類型解析爲 never 時，會被忽略不會生成這個屬性

如上只能過濾對象第一層的 null 和 undefined

如何更進一步改成可以遞歸的呢？

type User = {
    name: string
    age: undefined,
    children: {
        boy: number
        girl: number
        neutral: null
    }
}
// 遞歸處理對象類型的 DeepNonNullable
type DeepNonNullable<T> = T extends object ? { [P in keyof T as T[P] extends null | undefined ? never : P]: DeepNonNullable<T[P]> } : T;

type T1 = DeepNonNullable<User>
// type T1 = {
//    name: string;
//    children: {
//        boy: number;
//        girl: number;
//    };
//}

Awaited

Awaited<T>：作用是獲取 async/await 函數或 promise 的 then() 方法的返回值的類型。而且自帶遞歸效果，如果是這樣嵌套的異步方法，也能拿到最終的返回值類型

示例：

// Promise
type T1 = Awaited<Promise<string>>;
// type T1 = string

// 嵌套 Promise，會遞歸
type T2 = Awaited<Promise<Promise<number>>>;
// type T2 = number

// 聯合類型，會觸發分發
type T3 = Awaited<boolean | Promise<number>>;
// type T3 = number | boolean

來看下源碼定義，看下到底是怎麼執行的，是怎麼拿到結果的呢？

// 源碼定義
type Awaited<T> = T extends null | undefined
 ? T
 : T extends object & { then(onfulfilled: infer F): any }
  ? F extends (value: infer V, ...args: any) => any
   ? Awaited<V>
   : never
  : T

泛型條件有點多，就換了下行，方便看

如果 T 是 null 或 undefined 就直接返回 T
如果 T 是對象類型，並且裏面有 then 方法，就用 infer 類型推斷出 then 方法的第一個參數onfulfilled 的類型賦值給 F，onfulfilled 其實就是我們熟悉的 resolve。所以這裏可以看出或者準確的說，Awaited 拿的不是 then() 的返回值類型，而是 resolve() 的返回值類型
傳入 V 遞歸調用
既然 F 是回調函數 resolve ，就推斷出該函數第一個參數類型賦值給 V ，resolve 的參數自然就是返回值
F 不是函數就返回 never
如果 T 不是對象類型或者是對象但沒有 then 方法，返回 T ，就是最後一行的 T

Parameters

Parameters<T>：作用是獲取函數所有參數的類型集合，返回的是元組。T 自然就是函數了

使用示例：

declare function f1(arg: { a: number; b: string }): void;

// 沒有參數的函數
type T1 = Parameters<() => string>;
// type T1 = []

// 一個參數的函數
type T2 = Parameters<(s: string) => void>;
// type T2 = [s: string]

// 泛型參數的函數
type T3 = Parameters<<T>(arg: T) => T>;
// type T3 = [arg: unknown]

// typeof f1 結果爲 (arg: { a: number; b: string }) => void
type T4 = Parameters<typeof f1>;
// type T4 = [arg: {
//     a: number;
//     b: string;
// }]

// any 和 never
type T5 = Parameters<any>;
// type T5 = unknown[]
type T6 = Parameters<never>;
// type T6 = never

// 下面這樣傳參是會報錯的
type T7 = Parameters<string>;
type T8 = Parameters<Function>;

// 源碼定義
type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never

可以看到限制了函數類型，然後 ...args 取參數和 js 中的用法是一樣的，infer 表示待推斷的類型變量，打斷出 ...args 取到的類型賦值給 P

ReturnType

ReturnType<T>：作用是獲取函數返回值的類型。T 爲函數

示例：

declare function f1(): { a: number; b: string };

type T1 = ReturnType<() => string>;
// type T1 = string

type T2 = ReturnType<(s: string) => void>;
// type T2 = void

type T3 = ReturnType<<T>() => T>;
// type T3 = unknown

type T4 = ReturnType<<T extends U, U extends number[]>() => T>;
// type T4 = number[]

type T5 = ReturnType<typeof f1>;
// type T5 = {
//     a: number;
//     b: string;
// }

// any 和 never
type T6 = ReturnType<any>;
// type T6 = any
type T7 = ReturnType<never>;
// type T7 = never

// 下面這樣是不行的
type T8 = ReturnType<string>;
type T9 = ReturnType<Function>;

// 源碼定義
type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any

可以看到源碼定義上和 Parameters 是基本一樣的，只是把類型推斷的參數換成返回值了

ConstructorParameters/InstanceType

我們知道 Parameters 和 ReturnType 這一對是獲取普通 / 箭頭函數的參數類型集合以及返回值類型的了，還有一對組合ConstructorParameters 和 InstanceType 是獲取構造函數的參數類型集合以及返回值類型的，和上面的比較類似我就放到一起了

Uppercase/Lowercase

這倆兒的作用是轉換全部字母大小寫

type T1 = Uppercase<"abcd">
// type T1 = "ABCD"

type T2 = Lowercase<"ABCD">
// type T2 = "abcd"

Capitalize/Uncapitalize

這倆兒的作用是轉換首字母大小寫

type T1 = Capitalize<"abcd efg">
// type T1 = "Abcd efg"

type T2 = Uncapitalize<"ABCD EFG">
// type T2 = "aBCD EFG"

練習四

請實現一個類型，把對象類型中的屬性名換成大寫，需要注意的是對象屬性名支持 string | number | symbol 三種類型

type User1 = {
    name: string
    age: number
    18: number
}

// 實現如下，只需調用現在的工具類型 Uppercase 就行了

// 先取出所有字符串屬性的出來，再處理返回 { NAME: string, AGE: number }
// type T1<T> = { [P in keyof T & string as Uppercase<P>]: T[P] }
// 只處理字符串屬性的，其他正常返回
type T1<T> = { [P in keyof T as P extends string ? Uppercase<P> : P]: T[P] }

type T2 = T1<User1>
// type T2 = {
//     NAME: string;
//     AGE: number;
//     18: number
// }

綜合練習

請實現一個類型，可以把下劃線屬性名的對象，換成駝峯屬性名的對象。這個就沒有現成的工具類型調用了，所以需要我們額外實現一個

這個練習用到了本文中的很多知識，先自己寫一下咯

type User1 = {
    my_name: string
    my_age_type: number // 多個下劃線
    my_children: {
        my_boy: number
        my_girl: number
    }
}

// 實現如下
type T1<T> = T extends string
 ? T extends `${infer A}_${infer B}`
  ? `${A}${T1<Capitalize<B>>}` // 這裏有遞歸處理單個屬性名多個下劃線
  : T
 : T;
// 對象不遞歸
// type T2<T> = { [P in keyof T as T1<P>]: T[P] }
// 對象遞歸
type T2<T> = T extends object ? { [P in keyof T as T1<P>]: T2<T[P]> } : T

type T3 = T2<User1>
// type T3 = {
//     myName: string;
//     myAgeType: number;
//     myChildren: {
//         myBoy: number;
//         myGirl: number;
//     };
// }

這個練習用到了 extends、infer、as、循環、遞歸，相信能更好地幫助我們理解和運用

參考資料

https://www.typescriptlang.org/docs/handbook/utility-types.html

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

Exclude

Extract

Omit

Pick

練習一

Record

Partial

Required

Readonly

練習二

NonNullable

練習三

Awaited

Parameters

ReturnType

ConstructorParameters/InstanceType

Uppercase/Lowercase

Capitalize/Uncapitalize

練習四

綜合練習

參考資料

猜你喜歡