[[429322]]

一、泛型是什么

軟件工程中，我們不僅要?jiǎng)?chuàng)建一致的定義良好的 API，同時(shí)也要考慮可重用性。組件不僅能夠支持當(dāng)前的數(shù)據(jù)類型，同時(shí)也能支持未來(lái)的數(shù)據(jù)類型，這在創(chuàng)建大型系統(tǒng)時(shí)為你提供了十分靈活的功能。

泛型表示泛指某一種類型，開(kāi)發(fā)者可以指定一個(gè)表示類型的變量，用它來(lái)作為實(shí)際類型的占位符，用尖括號(hào)來(lái)包裹類型變量 。泛型的主要作用是創(chuàng)建可重用的組件，從而讓一個(gè)組件可以支持多種數(shù)據(jù)類型，它可以作用在接口、類、函數(shù)或類型別名上。

下面我們來(lái)舉個(gè)例子，幫助大家更好地理解上述的內(nèi)容。在這個(gè)例子中，我們將一步步揭示泛型的作用。

1.1 identity 函數(shù)示例

首先我們來(lái)定義一個(gè)通用的 identity 函數(shù)，該函數(shù)接收一個(gè)參數(shù)并直接返回它：

function identity (value) { 
  return value; 
} 
 
console.log(identity(1)) // 1 

現(xiàn)在，我們將 identity 函數(shù)做適當(dāng)?shù)恼{(diào)整，以支持 TypeScript 的 number 類型的參數(shù)：

function identity (value: number) : number { 
 
return value; 
 
} 
 
console.log(identity(1)) // 1 

這里 identity 的問(wèn)題是我們將 number 類型分配給參數(shù)和返回類型，使該函數(shù)僅可用于該原始類型。但該函數(shù)并不是通用的，很明顯這并不是我們所希望的。雖然我們可以把 number 換成 any，但這樣的話，我們失去了定義應(yīng)該返回哪種類型的能力，并且在這個(gè)過(guò)程中使編譯器失去了類型保護(hù)的作用。

我們的目標(biāo)是讓 identity 函數(shù)可以適用于任意的類型，為了實(shí)現(xiàn)這個(gè)目標(biāo)，我們可以使用泛型，具體實(shí)現(xiàn)方式如下：

function identity <T>(value: T) : T { 
  return value; 
} 
 
console.log(identity<number>(1)) // 1 

對(duì)于剛接觸 TypeScript 泛型的讀者來(lái)說(shuō)，首次看到 語(yǔ)法會(huì)感到陌生。但這沒(méi)什么可擔(dān)心的，就像傳遞參數(shù)一樣，我們傳遞了我們想要用于特定函數(shù)調(diào)用的類型。

參考上面的圖片，當(dāng)我們調(diào)用 identity(1) ，number 類型就像參數(shù) 1 一樣，它將在出現(xiàn) T 的任何位置填充該類型。圖中 內(nèi)部的 T 被稱為類型變量，它是我們希望傳遞給 identity 函數(shù)的類型占位符，同時(shí)它被分配給 value 參數(shù)用來(lái)代替它的類型：此時(shí) T 充當(dāng)?shù)氖穷愋?，而不是特定? number 類型。

其中 T 代表 Type，在定義泛型時(shí)通常用作第一個(gè)類型變量名稱。但實(shí)際上 T 可以用任何有效名稱代替。除了 T 之外，以下是常見(jiàn)泛型變量代表的意思：

• K(Key)：表示對(duì)象中的鍵類型;
• V(Value)：表示對(duì)象中的值類型;
• E(Element)：表示元素類型。

其實(shí)并不是只能定義一個(gè)類型變量，我們可以引入希望定義的任何數(shù)量的類型變量。比如我們引入一個(gè)新的類型變量 U，用于擴(kuò)展我們定義的 identity 函數(shù)：

function identity <T, U>(value: T, message: U) : T { 
  console.log(message); 
  return value; 
} 
 
console.log(identity<Number, string>(68, "Semlinker")); 

除了為類型變量顯式設(shè)定值之外，另一種方式是讓編譯器自動(dòng)選擇這些類型，從而使代碼更簡(jiǎn)潔。我們可以完全省略尖括號(hào)，比如：

function identity <T, U>(value: T, message: U) : T { 
  console.log(message); 
  return value; 
} 
 
console.log(identity(68, "Semlinker")); 

對(duì)于上述代碼，編譯器足夠聰明，能夠知道我們的參數(shù)類型，并將它們賦值給 T 和 U，而不需要開(kāi)發(fā)人員顯式指定它們。下面我們來(lái)看張動(dòng)圖，直觀地感受一下類型傳遞的過(guò)程：

如你所見(jiàn)，該函數(shù)接收你傳遞給它的任何類型，使得我們可以為不同類型創(chuàng)建可重用的組件?，F(xiàn)在我們?cè)賮?lái)看一下 identity 函數(shù)：

function identity <T, U>(value: T, message: U) : T { 
  console.log(message); 
  return value; 
} 

相比之前定義的 identity 函數(shù)，新的 identity 函數(shù)增加了一個(gè)類型變量 U，但該函數(shù)的返回類型我們?nèi)匀皇褂? T。如果我們想要返回兩種類型的對(duì)象該怎么辦呢?針對(duì)這個(gè)問(wèn)題，我們有多種方案，其中一種就是使用 TypeScript 中的元組：

function identity <T, U>(value: T, message: U) : [T, U] { 
  return [value, message]; 
} 

二、泛型接口

要解決函數(shù)中返回多種類型對(duì)象的問(wèn)題，我們可以創(chuàng)建一個(gè)用于的 identity 函數(shù)通用 Identities 接口：

interface Identities<V, M> { 
  value: V, 
  message: M 
} 

在上述的 Identities 接口中，我們引入了類型變量 V 和 M，來(lái)進(jìn)一步說(shuō)明有效的字母都可以用于表示類型變量，之后我們就可以將 Identities 接口作為 identity 函數(shù)的返回類型：

function identity<T, U> (value: T, message: U): Identities<T, U> { 
  console.log(value + ": " + typeof (value)); 
  console.log(message + ": " + typeof (message)); 
  let identities: Identities<T, U> = { 
    value, 
    message 
  }; 
  return identities; 
} 
 
console.log(identity(68, "Semlinker")); 

以上代碼成功運(yùn)行后，在控制臺(tái)會(huì)輸出以下結(jié)果：

68: number 
Semlinker: string 
{value: 68, message: "Semlinker"} 

泛型除了可以應(yīng)用在函數(shù)和接口之外，它也可以應(yīng)用在類中，下面我們就來(lái)看一下在類中如何使用泛型。

三、泛型類

在類中使用泛型也很簡(jiǎn)單，我們只需要在類名后面，使用 的語(yǔ)法定義任意多個(gè)類型變量，具體示例如下：

interface GenericInterface<U> { 
  value: U 
  getIdentity: () => U 
} 
 
class IdentityClass<T> implements GenericInterface<T> { 
  value: T 
 
  constructor(value: T) { 
    this.value = value 
  } 
 
  getIdentity(): T { 
    return this.value 
  } 
} 
 
const myNumberClass = new IdentityClass<number>(68); 
console.log(myNumberClass.getIdentity()); // 68 
 
const myStringClass = new IdentityClass<string>("Semlinker!"); 
console.log(myStringClass.getIdentity()); // Semlinker! 

接下來(lái)我們以實(shí)例化 myNumberClass 為例，來(lái)分析一下其調(diào)用過(guò)程：

• 在實(shí)例化 IdentityClass 對(duì)象時(shí)，我們傳入 number 類型和構(gòu)造函數(shù)參數(shù)值 68;
• 之后在 IdentityClass 類中，類型變量 T 的值變成 number 類型;
• IdentityClass 類實(shí)現(xiàn)了 GenericInterface，而此時(shí) T 表示 number 類型，因此等價(jià)于該類實(shí)現(xiàn)了 GenericInterface 接口;
• 而對(duì)于 GenericInterface 接口來(lái)說(shuō)，類型變量 U 也變成了 number。這里我有意使用不同的變量名，以表明類型值沿鏈向上傳播，且與變量名無(wú)關(guān)。

相信看到這里一些讀者會(huì)有疑問(wèn)，我們什么時(shí)候需要使用泛型呢?通常在決定是否使用泛型時(shí)，我們有以下兩個(gè)參考標(biāo)準(zhǔn)：

• 當(dāng)你的函數(shù)、接口或類將處理多種數(shù)據(jù)類型時(shí);
• 當(dāng)函數(shù)、接口或類在多個(gè)地方使用該數(shù)據(jù)類型時(shí)。

很有可能你沒(méi)有辦法保證在項(xiàng)目早期就使用泛型的組件，但是隨著項(xiàng)目的發(fā)展，組件的功能通常會(huì)被擴(kuò)展。這種增加的可擴(kuò)展性最終很可能會(huì)滿足上述兩個(gè)條件，在這種情況下，引入泛型將比復(fù)制組件來(lái)滿足一系列數(shù)據(jù)類型更方便。

我們將在本文的后面探討更多滿足這兩個(gè)條件的用例。不過(guò)在這樣做之前，讓我們先介紹一下 Typescript 泛型提供的其他功能。

四、泛型約束

有時(shí)我們可能希望限制每個(gè)類型變量接受的類型數(shù)量，這就是泛型約束的作用。下面我們來(lái)舉幾個(gè)例子，介紹一下如何使用泛型約束。

4.1 確保屬性存在

有時(shí)候，我們希望類型變量對(duì)應(yīng)的類型上存在某些屬性。這時(shí)，除非我們顯式地將特定屬性定義為類型變量，否則編譯器不會(huì)知道它們的存在。

一個(gè)很好的例子是在處理字符串或數(shù)組時(shí)，我們會(huì)假設(shè) length 屬性是可用的。讓我們?cè)俅问褂?identity 函數(shù)并嘗試輸出參數(shù)的長(zhǎng)度：

function identity<T>(arg: T): T { 
  // Property 'length' does not exist on type 'T'.(2339) 
  console.log(arg.length); // Error 
  return arg; 
} 

在這種情況下，編譯器沒(méi)法確認(rèn) T 類型一定含有 length 屬性，尤其是在可以將任何類型賦給類型變量 T 的情況下。我們需要做的就是讓類型變量 extends 一個(gè)含有我們所需屬性的接口，比如這樣：

interface Length { 
  length: number; 
} 
 
function identity<T extends Length>(arg: T): T { 
  console.log(arg.length); // 可以獲取length屬性 
  return arg; 
} 

T extends Length 用于告訴編譯器，我們支持已經(jīng)實(shí)現(xiàn) Length 接口的任何類型。之后，當(dāng)我們使用不含有 length 屬性的對(duì)象作為參數(shù)調(diào)用 identity 函數(shù)時(shí)，TypeScript 會(huì)提示相關(guān)的錯(cuò)誤信息：

identity(68); // Error 
// Argument of type '68' is not assignable to parameter of type 'Length'.(2345) 

此外，我們還可以使用 , 號(hào)來(lái)分隔多種約束類型，比如：。而對(duì)于上述的 length 屬性問(wèn)題來(lái)說(shuō)，如果我們顯式地將變量設(shè)置為數(shù)組類型，也可以解決該問(wèn)題，具體方式如下：

function identity<T>(arg: T[]): T[] { 
  console.log(arg.length);   
  return arg;  
} 

4.2 檢查對(duì)象上的鍵是否存在

泛型約束的另一個(gè)常見(jiàn)的使用場(chǎng)景就是檢查對(duì)象上的鍵是否存在。不過(guò)在看具體示例之前，我們得來(lái)了解一下 keyof 操作符，keyof 操作符是在 TypeScript 2.1 版本引入的，該操作符可以用于獲取某種類型的所有鍵，其返回類型是聯(lián)合類型。 下面我們來(lái)舉個(gè) keyof 的使用示例：

interface Person { 
  name: string; 
  age: number; 
  location: string; 
} 
 
type K1 = keyof Person; // "name" | "age" | "location" 
type K2 = keyof Person[];  // number | "length" | "push" | "concat" | ... 
type K3 = keyof { [x: string]: Person };  // string | number 

提示：TypeScript Playground v4.2.3 版本以上的編譯器不會(huì)顯示 keyof 操作符的結(jié)果

通過(guò) keyof 操作符，我們就可以獲取指定類型的所有鍵，之后我們就可以結(jié)合前面介紹的 extends 約束，即限制輸入的屬性名包含在 keyof 返回的聯(lián)合類型中。具體的使用方式如下：

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] { 
  return obj[key]; 
} 

在以上的 getProperty 函數(shù)中，我們通過(guò) K extends keyof T 確保參數(shù) key 一定是對(duì)象中含有的鍵，這樣就不會(huì)出現(xiàn)運(yùn)行時(shí)錯(cuò)誤。這是一個(gè)類型安全的解決方案，與簡(jiǎn)單調(diào)用 let value = obj[key]; 是不同的。

下面我們來(lái)看一下如何使用 getProperty 函數(shù)：

enum Difficulty { 
  Easy, 
  Intermediate, 
  Hard 
} 
 
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] { 
  return obj[key]; 
} 
 
let tsInfo = { 
   name: "Typescript", 
   supersetOf: "Javascript", 
   difficulty: Difficulty.Intermediate 
} 
  
let difficulty: Difficulty =  
  getProperty(tsInfo, 'difficulty'); // OK 
 
let supersetOf: string =  
  getProperty(tsInfo, 'superset_of'); // Error 

在以上示例中，對(duì)于 getProperty(tsInfo, 'superset_of') 這個(gè)表達(dá)式，TypeScript 編譯器會(huì)提示以下錯(cuò)誤信息：

Argument of type '"superset_of"' is not assignable to parameter of type '"difficulty" | "name" | "supersetOf"'. 

很明顯通過(guò)使用泛型約束，在編譯階段我們就可以提前發(fā)現(xiàn)錯(cuò)誤，大大提高了程序的健壯性和穩(wěn)定性。接下來(lái)，我們來(lái)介紹一下泛型參數(shù)默認(rèn)類型。

五、泛型參數(shù)默認(rèn)類型

在 TypeScript 2.3 以后，我們可以為泛型中的類型參數(shù)指定默認(rèn)類型。當(dāng)使用泛型時(shí)沒(méi)有在代碼中直接指定類型參數(shù)，從實(shí)際值參數(shù)中也無(wú)法推斷出類型時(shí)，這個(gè)默認(rèn)類型就會(huì)起作用。

泛型參數(shù)默認(rèn)類型與普通函數(shù)默認(rèn)值類似，對(duì)應(yīng)的語(yǔ)法很簡(jiǎn)單，即 ，對(duì)應(yīng)的使用示例如下：

interface Person<T=string> { 
  id: T; 
} 
 
const p0: Person = { id: "lolo" }; 
const p1: Person<number> = { id: 28 }; 

泛型參數(shù)的默認(rèn)類型遵循以下規(guī)則：

• 有默認(rèn)類型的類型參數(shù)被認(rèn)為是可選的。
• 必選的類型參數(shù)不能在可選的類型參數(shù)后。
• 如果類型參數(shù)有約束，類型參數(shù)的默認(rèn)類型必須滿足這個(gè)約束。
• 當(dāng)指定類型實(shí)參時(shí)，你只需要指定必選類型參數(shù)的類型實(shí)參。未指定的類型參數(shù)會(huì)被解析為它們的默認(rèn)類型。
• 如果指定了默認(rèn)類型，且類型推斷無(wú)法選擇一個(gè)候選類型，那么將使用默認(rèn)類型作為推斷結(jié)果。
• 一個(gè)被現(xiàn)有類或接口合并的類或者接口的聲明可以為現(xiàn)有類型參數(shù)引入默認(rèn)類型。
• 一個(gè)被現(xiàn)有類或接口合并的類或者接口的聲明可以引入新的類型參數(shù)，只要它指定了默認(rèn)類型。

六、泛型條件類型

在 TypeScript 2.8 中引入了條件類型，使得我們可以根據(jù)某些條件得到不同的類型，這里所說(shuō)的條件是類型兼容性約束。條件類型會(huì)以一個(gè)條件表達(dá)式進(jìn)行類型關(guān)系檢測(cè)，從而在兩種類型中選擇其一：

T extends U ? X : Y 

以上表達(dá)式的意思是：若 T 能夠賦值給 U，那么類型是 X，否則為 Y。在條件類型表達(dá)式中，我們通常還會(huì)結(jié)合 infer 關(guān)鍵字，實(shí)現(xiàn)類型抽?。?/p>

interface Dictionary<T = any> { 
  [key: string]: T; 
} 
  
type StrDict = Dictionary<string> 
 
type DictMember<T> = T extends Dictionary<infer V> ? V : never 
type StrDictMember = DictMember<StrDict> // string 

在上面示例中，當(dāng)類型 T 滿足 T extends Dictionary 約束時(shí)，我們會(huì)使用 infer 關(guān)鍵字聲明了一個(gè)類型變量 V，并返回該類型，否則返回 never 類型。

在 TypeScript 中，never 類型表示的是那些永不存在的值的類型。例如， never 類型是那些總是會(huì)拋出異?；蚋揪筒粫?huì)有返回值的函數(shù)表達(dá)式或箭頭函數(shù)表達(dá)式的返回值類型。

另外，需要注意的是，沒(méi)有類型是 never 的子類型或可以賦值給 never 類型(除了 never 本身之外)。即使 any 也不可以賦值給 never。

條件類型還有一個(gè)特性：分布式條件類型。當(dāng)檢測(cè)的類型是由 ”裸類型“(指該類型未被包裝過(guò)) 組成的聯(lián)合類型時(shí)，條件類型會(huì)被自動(dòng)分發(fā)成聯(lián)合類型。以 T extends U ? X : Y 條件類型為例，當(dāng)類型參數(shù)的為 A | B | C 時(shí)，該條件類型將會(huì)被解析為 (A extends U ? X : Y) | (B extends U ? X : Y) | (C extends U ? X : Y)。

分布式條件類型的使用示例如下：

type TypeName<T> = T extends string 
  ? "string" 
  : T extends number 
  ? "number" 
  : T extends boolean 
  ? "boolean" 
  : T extends undefined 
  ? "undefined" 
  : T extends Function 
  ? "function" 
  : "object"; 
 
type T10 = TypeName<string | (() => void)>; // "string" | "function" 
type T12 = TypeName<string | string[] | undefined>; // "string" | "object" | "undefined" 
type T11 = TypeName<string[] | number[]>; // "object" 

七、泛型工具類型

為了方便開(kāi)發(fā)者 TypeScript 內(nèi)置了一些常用的工具類型，比如 Partial、Required、Readonly、Record 和 ReturnType 等。出于篇幅考慮，這里我們只簡(jiǎn)單介紹其中幾個(gè)常用的工具類型。

7.1 Partial

Partial 的作用就是將某個(gè)類型里的屬性全部變?yōu)榭蛇x項(xiàng) ?。

定義：

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

以上 Partial 類型被稱為映射類型，用于把已有的類型轉(zhuǎn)換成新的類型。在以上代碼中，我們首先通過(guò) keyof T 拿到 T 的所有屬性名，然后使用 in 進(jìn)行遍歷，將值賦給類型變量 P，最后通過(guò) T[P] 取得屬性 P 對(duì)應(yīng)的類型。中間的 ? 號(hào)，表示將屬性變?yōu)榭蛇x。

示例：

interface Todo { 
  title: string; 
  description: string; 
} 
 
function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>) { 
  return { ...todo, ...fieldsToUpdate }; 
} 
 
const todo1 = { 
  title: "Learn TS", 
  description: "Learn TypeScript" 
}; 
 
const todo2 = updateTodo(todo1, { 
  description: "Learn TypeScript Handbook" 
}); 

在上面的 updateTodo 方法中，我們利用 Partial 工具類型，定義 fieldsToUpdate 的類型為 Partial，即：

{ 
   title?: string | undefined; 
   description?: string | undefined; 
} 

是不是覺(jué)得 Partial 使用起來(lái)挺簡(jiǎn)單的，那么如何定義一個(gè) SetOptional 工具類型，支持把給定的 keys 對(duì)應(yīng)的屬性變成可選的。對(duì)應(yīng)的使用示例如下所示：

type Foo = { 
 a: number; 
 b?: string; 
 c: boolean; 
} 
 
// 測(cè)試用例 
type SomeOptional = SetOptional<Foo, 'a' | 'b'>; 
 
// type SomeOptional = { 
//  a?: number; // 該屬性已變成可選的 
//  b?: string; // 保持不變 
//  c: boolean;  
// } 

7.2 Record

Record 的作用是將 K 中所有的屬性的值轉(zhuǎn)化為 T 類型。

定義：

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

示例：

interface PageInfo { 
  title: string; 
} 
 
type Page = "home" | "about" | "contact"; 
 
const x: Record<Page, PageInfo> = { 
  about: { title: "about" }, 
  contact: { title: "contact" }, 
  home: { title: "home" } 
}; 

7.3 Pick

Pick 的作用是將某個(gè)類型中的子屬性挑出來(lái)，變成包含這個(gè)類型部分屬性的子類型。

定義：

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

示例：

interface Todo { 
  title: string; 
  description: string; 
  completed: boolean; 
} 
 
type TodoPreview = Pick<Todo, "title" | "completed">; 
 
const todo: TodoPreview = { 
  title: "Learn TS", 
  completed: false 
}; 

在掌握 Pick 的用法之后，你可以想一下，如何定義一個(gè) ConditionalPick 工具類型，支持根據(jù)指定的 Condition 條件來(lái)生成新的類型，對(duì)應(yīng)的使用示例如下：

interface Example { 
 a: string; 
 b: string | number; 
 c: () => void; 
 d: {}; 
} 
 
// 測(cè)試用例： 
type StringKeysOnly = ConditionalPick<Example, string>; 
//=> { a: string } 

7.4 Exclude

Exclude 的作用是將某個(gè)類型中屬于另一個(gè)的類型移除掉。

定義：

type Exclude<T, U> = T extends U ? never : T; 

如果 T 能賦值給 U 類型的話，那么就會(huì)返回 never 類型，否則返回 T 類型。最終實(shí)現(xiàn)的效果就是將 T 中某些屬于 U 的類型移除掉。

示例：

type T0 = Exclude<"a" | "b" | "c", "a">; // "b" | "c" 
type T1 = Exclude<"a" | "b" | "c", "a" | "b">; // "c" 
type T2 = Exclude<string | number | (() => void), Function>; // string | number 

由以上結(jié)果可知，Exclude 工具類型利用了前面介紹的分布式條件類型的特性。

7.5 ReturnType

ReturnType 的作用是用于獲取函數(shù) T 的返回類型。

定義：

type ReturnType any> = T extends (...args: any) => infer R ? R : any; 

示例：

type T0 = ReturnType<() => string>; // string 
type T1 = ReturnType<(s: string) => void>; // void 
type T2 = ReturnType<<T>() => T>; // {} 
type T3 = ReturnType<<T extends U, U extends number[]>() => T>; // number[] 
type T4 = ReturnType<any>; // any 
type T5 = ReturnType<never>; // any 
type T6 = ReturnType<string>; // Error 
type T7 = ReturnType<Function>; // Error 

簡(jiǎn)單介紹了泛型工具類型，最后我們來(lái)介紹如何使用泛型來(lái)創(chuàng)建對(duì)象。

八、使用泛型創(chuàng)建對(duì)象

8.1 構(gòu)造簽名

有時(shí)，泛型類可能需要基于傳入的泛型 T 來(lái)創(chuàng)建其類型相關(guān)的對(duì)象。比如：

class FirstClass { 
  id: number | undefined; 
} 
 
class SecondClass { 
  name: string | undefined; 
} 
 
class GenericCreator<T> { 
  create(): T { 
    return new T(); 
  } 
} 
 
const creator1 = new GenericCreator<FirstClass>(); 
const firstClass: FirstClass = creator1.create(); 
 
const creator2 = new GenericCreator<SecondClass>(); 
const secondClass: SecondClass = creator2.create(); 

在以上代碼中，我們定義了兩個(gè)普通類和一個(gè)泛型類 GenericCreator。在通用的 GenericCreator 泛型類中，我們定義了一個(gè)名為 create 的成員方法，該方法會(huì)使用 new 關(guān)鍵字來(lái)調(diào)用傳入的實(shí)際類型的構(gòu)造函數(shù)，來(lái)創(chuàng)建對(duì)應(yīng)的對(duì)象。但可惜的是，以上代碼并不能正常運(yùn)行，對(duì)于以上代碼，在 TypeScript v4.4.3 編譯器下會(huì)提示以下錯(cuò)誤：

'T' only refers to a type, but is being used as a value here. 

這個(gè)錯(cuò)誤的意思是：T 類型僅指類型，但此處被用作值。那么如何解決這個(gè)問(wèn)題呢?根據(jù) TypeScript 文檔，為了使通用類能夠創(chuàng)建 T 類型的對(duì)象，我們需要通過(guò)其構(gòu)造函數(shù)來(lái)引用 T 類型。對(duì)于上述問(wèn)題，在介紹具體的解決方案前，我們先來(lái)介紹一下構(gòu)造簽名。

在 TypeScript 接口中，你可以使用 new 關(guān)鍵字來(lái)描述一個(gè)構(gòu)造函數(shù)：

interface Point { 
  new (x: number, y: number): Point; 
} 

以上接口中的 new (x: number, y: number) 我們稱之為構(gòu)造簽名，其語(yǔ)法如下：

ConstructSignature:new?TypeParametersopt?(?ParameterListopt?)?TypeAnnotationopt

在上述的構(gòu)造簽名中，TypeParametersopt 、ParameterListopt 和 TypeAnnotationopt 分別表示：可選的類型參數(shù)、可選的參數(shù)列表和可選的類型注解。與該語(yǔ)法相對(duì)應(yīng)的幾種常見(jiàn)的使用形式如下：

new C   
new C ( ... )   
new C < ... > ( ... ) 

介紹完構(gòu)造簽名，我們?cè)賮?lái)介紹一個(gè)與之相關(guān)的概念，即構(gòu)造函數(shù)類型。

8.2 構(gòu)造函數(shù)類型

在 TypeScript 語(yǔ)言規(guī)范中這樣定義構(gòu)造函數(shù)類型：

An object type containing one or more construct signatures is said to be a constructor type. Constructor types may be written using constructor type literals or by including construct signatures in object type literals.

通過(guò)規(guī)范中的描述信息，我們可以得出以下結(jié)論：

• 包含一個(gè)或多個(gè)構(gòu)造簽名的對(duì)象類型被稱為構(gòu)造函數(shù)類型;
• 構(gòu)造函數(shù)類型可以使用構(gòu)造函數(shù)類型字面量或包含構(gòu)造簽名的對(duì)象類型字面量來(lái)編寫(xiě)。

那么什么是構(gòu)造函數(shù)類型字面量呢?構(gòu)造函數(shù)類型字面量是包含單個(gè)構(gòu)造函數(shù)簽名的對(duì)象類型的簡(jiǎn)寫(xiě)。具體來(lái)說(shuō)，構(gòu)造函數(shù)類型字面量的形式如下：

new < T1, T2, ... > ( p1, p2, ... ) => R 

該形式與以下對(duì)象類型字面量是等價(jià)的：

{ new < T1, T2, ... > ( p1, p2, ... ) : R } 

下面我們來(lái)舉個(gè)實(shí)際的示例：

// 構(gòu)造函數(shù)類型字面量 
 
new (x: number, y: number) => Point 

等價(jià)于以下對(duì)象類型字面量：

{ 
   new (x: number, y: number): Point; 
} 

8.3 構(gòu)造函數(shù)類型的應(yīng)用

在介紹構(gòu)造函數(shù)類型的應(yīng)用前，我們先來(lái)看個(gè)例子：

interface Point { 
  new (x: number, y: number): Point; 
  x: number; 
  y: number; 
} 
 
class Point2D implements Point { 
  readonly x: number; 
  readonly y: number; 
 
  constructor(x: number, y: number) { 
    this.x = x; 
    this.y = y; 
  } 
} 
 
const point: Point = new Point2D(1, 2); 

對(duì)于以上的代碼，TypeScript 編譯器會(huì)提示以下錯(cuò)誤信息：

Class 'Point2D' incorrectly implements interface 'Point'. 
Type 'Point2D' provides no match for the signature 'new (x: number, y: number): Point'. 

相信很多剛接觸 TypeScript 不久的小伙伴都會(huì)遇到上述的問(wèn)題。要解決這個(gè)問(wèn)題，我們就需要把對(duì)前面定義的 Point 接口進(jìn)行分離，即把接口的屬性和構(gòu)造函數(shù)類型進(jìn)行分離：

interface Point { 
  x: number; 
  y: number; 
} 
 
interface PointConstructor { 
  new (x: number, y: number): Point; 
} 

完成接口拆分之后，除了前面已經(jīng)定義的 Point2D 類之外，我們又定義了一個(gè) newPoint 工廠函數(shù)，該函數(shù)用于根據(jù)傳入的 PointConstructor 類型的構(gòu)造函數(shù)，來(lái)創(chuàng)建對(duì)應(yīng)的 Point 對(duì)象。

class Point2D implements Point { 
  readonly x: number; 
  readonly y: number; 
 
  constructor(x: number, y: number) { 
    this.x = x; 
    this.y = y; 
  } 
} 
 
function newPoint( 
  pointConstructor: PointConstructor, 
  x: number, 
  y: number 
): Point { 
  return new pointConstructor(x, y); 
} 
 
const point: Point = newPoint(Point2D, 1, 2); 

8.4 使用泛型創(chuàng)建對(duì)象

了解完構(gòu)造簽名和構(gòu)造函數(shù)類型之后，下面我們來(lái)開(kāi)始解決上面遇到的問(wèn)題，首先我們需要重構(gòu)一下 create 方法，具體如下所示：

class GenericCreator<T> { 
  create<T>(c: { new (): T }): T { 
    return new c(); 
  } 
} 

在以上代碼中，我們重新定義了 create 成員方法，根據(jù)該方法的簽名，我們可以知道該方法接收一個(gè)參數(shù)，其類型是構(gòu)造函數(shù)類型，且該構(gòu)造函數(shù)不包含任何參數(shù)，調(diào)用該構(gòu)造函數(shù)后，會(huì)返回類型 T 的實(shí)例。

如果構(gòu)造函數(shù)含有參數(shù)的話，比如包含一個(gè) number 類型的參數(shù)時(shí)，我們可以這樣定義 create 方法：

create<T>(c: { new(a: number): T; }, num: number): T { 
  return new c(num); 
} 

更新完 GenericCreator 泛型類，我們就可以使用下面的方式來(lái)創(chuàng)建 FirstClass 和 SecondClass 類的實(shí)例：

const creator1 = new GenericCreator<FirstClass>(); 
const firstClass: FirstClass = creator1.create(FirstClass); 
 
const creator2 = new GenericCreator<SecondClass>(); 
const secondClass: SecondClass = creator2.create(SecondClass); 

8.5 抽象構(gòu)造簽名

在 TypeScript 4.2 版本中引入了抽象構(gòu)造簽名，用于解決以下的問(wèn)題：

type ConstructorFunction = new (...args: any[]) => any; 
 
abstract class Utilities {} 
 
// Type 'typeof Utilities' is not assignable to type 'ConstructorFunction'. 
// Cannot assign an abstract constructor type to a non-abstract constructor type. 
let UtilityClass: ConstructorFunction = Utilities; // Error. 

由以上的錯(cuò)誤信息可知，我們不能把抽象構(gòu)造器類型分配給非抽象的構(gòu)造器類型。針對(duì)這個(gè)問(wèn)題，我們需要使用 abstract 修飾符：

declare type ConstructorFunction = abstract new (...args: any[]) => any; 

需要注意的是，對(duì)于抽象構(gòu)造器類型，我們也可以傳入具體的實(shí)現(xiàn)類：

declare type ConstructorFunction = abstract new (...args: any[]) => any; 
 
abstract class Utilities {} 
class UtilitiesConcrete extends Utilities {} 
 
let UtilityClass: ConstructorFunction = Utilities; // Ok 
let UtilityClass1: ConstructorFunction = UtilitiesConcrete; // Ok 

而對(duì)于 TypeScript 4.2 以下的版本，我們可以通過(guò)以下方式來(lái)解決上面的問(wèn)題：

type Constructor<T> = Function & { prototype: T } 
 
abstract class Utilities {} 
 
class UtilitiesConcrete extends Utilities {} 
 
let UtilityClass: Constructor<Utilities> = Utilities; 
let UtilityClass1: Constructor<UtilitiesConcrete> = UtilitiesConcrete; 

九、可變?cè)M類型

在 TypeScript 4.0 版本支持可變?cè)M類型，其中有兩個(gè)新的變化。第一個(gè)變化是元組類型的展開(kāi)運(yùn)算可以支持泛型了：

function tail<T extends any[]>(arr: readonly [any, ...T]) { 
  const [_ignored, ...rest] = arr; 
  return rest; 
} 
 
const myTuple = [1, 2, 3, 4] as const; 
const myArray = ["hello", "world"]; 
  
const r1 = tail(myTuple); // r1: [2, 3, 4] 
const r2 = tail([...myTuple, ...myArray] as const); // r2: [2, 3, 4, ...string[]] 

第二個(gè)變化是 rest 元素可以出現(xiàn)在元組中的任何位置，而不僅僅是在結(jié)尾!

type Strings = [string, string]; 
type Numbers = [number, number]; 
 
type StrStrNumNumBool = [...Strings, ...Numbers, boolean]; 

對(duì)于 TypeScript 4.0 以下的版本，以上代碼將會(huì)出現(xiàn)以下的錯(cuò)誤信息：

A rest element must be last in a tuple type.(1256) 

利用這兩個(gè)特性，我們就可以實(shí)現(xiàn)一個(gè)類型良好的 concat 函數(shù)：

type Arr = readonly any[]; 
  
function concat<T extends Arr, U extends Arr>(arr1: T, arr2: U): [...T, ...U] { 
  return [...arr1, ...arr2]; 
} 
 
const arr3 = concat([1, 2, 3], ["a", "b", "c"]) 

關(guān)于可變?cè)M類型的相關(guān)內(nèi)容，就不展開(kāi)介紹了，感興趣的小伙伴可以自行閱讀 TypeScript 4.0 的相關(guān)文檔。

十、泛型是如何工作的

最后，阿寶哥將使用 ts-ast-viewer 在線工具，帶大家換個(gè)角度來(lái)學(xué)習(xí) TypeScript 的泛型。對(duì)應(yīng)的示例代碼如下：

type Head<T extends Array<any>> = T extends [any, ...any] ? T[0] : never 
 
type H0 = Head<[1, 2, 3]> // 1 

10.1 類型變量 AST

10.2 條件類型 AST

10.3 類型引用 AST

所使用在線工具的地址為：https://ts-ast-viewer.com/

建議大家實(shí)際使用一下 ts-ast-viewer 這個(gè)在線工具，詳細(xì)看一下生成的節(jié)點(diǎn)，這樣的話，可以讓你更好地理解 TypeScript 的泛型。