一、泛型是什么？有什么作用？

當(dāng)我們定義一個(gè)變量不確定類型的時(shí)候有兩種解決方式：

• 使用any
  使用any定義時(shí)存在的問(wèn)題：雖然知道傳入值的類型但是無(wú)法獲取函數(shù)返回值的類型；另外也失去了ts類型保護(hù)的優(yōu)勢(shì)

• 使用泛型
  泛型指的是在定義函數(shù)/接口/類型時(shí)，不預(yù)先指定具體的類型，而是在使用的時(shí)候在指定類型限制的一種特性。

• 設(shè)計(jì)泛型的關(guān)鍵目的是在成員之間提供有意義的約束，這些成員可以是：類的實(shí)例成員、類的方法、函數(shù)參數(shù)和函數(shù)返回值。

為了便于大家更好地理解上述的內(nèi)容，我們來(lái)舉個(gè)例子，在這個(gè)例子中，我們將一步步揭示泛型的作用。首先我們來(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ù)并不是可擴(kuò)展或通用的，很明顯這并不是我們所希望的。

我們確實(shí)可以把 Number 換成 any，我們失去了定義應(yīng)該返回哪種類型的能力，并且在這個(gè)過(guò)程中使編譯器失去了類型保護(hù)的作用。我們的目標(biāo)是讓 identity 函數(shù)可以適用于任何特定的類型，為了實(shí)現(xiàn)這個(gè)目標(biāo)，我們可以使用泛型來(lái)解決這個(gè)問(wèn)題，具體實(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 的任何位置填充該類型。圖中< 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è)定值之外，一種更常見(jiàn)的做法是使編譯器自動(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"));

如你所見(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)題，我們有多種方案，其中一種就是使用元組，即為元組設(shè)置通用的類型：

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

雖然使用元組解決了上述的問(wèn)題，但有沒(méi)有其它更好的方案呢？答案是有的，你可以使用泛型接口。

二、泛型用法

1、在函數(shù)中使用泛型

function test <T> (arg:T):T{
  console.log(arg);
  return arg;
}
test<number>(111);// 返回值是number類型的 111
test<string | boolean>('hahaha')//返回值是string類型的 hahaha
test<string | boolean>(true);//返回值是布爾類型的 true

// 使用方式類似于函數(shù)傳參，傳什么數(shù)據(jù)類型，T就表示什么數(shù)據(jù)類型， 使用表示，T也可以換成任意字符串。

2、在接口中使用泛型

// 注意，這里寫法是定義的方法?。?！
interface Search {
  <T,Y>(name:T,age:Y):T
}

let fn:Search = function <T, Y>(name: T, id:Y):T {
  console.log(name, id)
  return name;
}
fn('li',11);//編譯器會(huì)自動(dòng)識(shí)別傳入的參數(shù)，將傳入的參數(shù)的類型認(rèn)為是泛型指定的類型

為了解決剛剛上面提到的問(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)看一下在類中如何使用泛型。

3、在類中使用泛型

class Animal<T> {
 name:T;
 constructor(name: T){
   this.name = name;
 }
 action<T>(say:T) {
   console.log(say)
 }
}
let cat = new Animal('cat');
cat.action('mimi')

在類中使用泛型也很簡(jiǎn)單，我們只需要在類名后面，使用 <T, …> 的語(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< T >，而此時(shí) T 表示 Number 類型，因此等價(jià)于該類實(shí)現(xiàn)了 GenericInterface< Number > 接口；
• 而對(duì)于 GenericInterface< T >接口來(lái)說(shuō)，類型變量 U 也變成了 Number。這里我有意使用不同的變量名，以表明類型值沿鏈向上傳播，且與變量名無(wú)關(guān)。
• 泛型類可確保在整個(gè)類中一致地使用指定的數(shù)據(jù)類型。比如，你可能已經(jīng)注意到在使用 Typescript 的 React 項(xiàng)目中使用了以下約定：

type Props = {
  className?: string
   ...
};

type State = {
  submitted?: bool
   ...
};

class MyComponent extends React.Component<Props, State> {
   ...
}

在以上代碼中，我們將泛型與 React 組件一起使用，以確保組件的 props 和 state 是類型安全的。

相信看到這里一些讀者會(huì)有疑問(wèn)，我們?cè)谑裁磿r(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 泛型提供的其他功能。

三、泛型約束

interface Person {
  name:string;
  age:number;
}
function student<T extends Person>(arg:T):T {
  return arg;
}

student({name:'lili'});//類型 "{ name: string; }" 中缺少屬性 "age"，但類型 "Person" 中需要該屬性
student({ name: "lili" , age:'11'});//不能將類型“string”分配給類型“number”
student({ name: "lili" , age:11});

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

1、確保屬性存在

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

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

在這種情況下，編譯器將不會(huì)知道 T 確實(shí)含有 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)分隔多種約束類型，比如：<T extends Length, Type2, Type3>。而對(duì)于上述的 length 屬性問(wèn)題來(lái)說(shuō)，如果我們顯式地將變量設(shè)置為數(shù)組類型，也可以解決該問(wèn)題，具體方式如下：

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

// or
function identity<T>(arg: Array<T>): Array<T> {      
  console.log(arg.length);
  return arg; 
}

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

泛型約束的另一個(gè)常見(jiàn)的使用場(chǎng)景就是檢查對(duì)象上的鍵是否存在。不過(guò)在看具體示例之前，我們得來(lái)了解一下 keyof 操作符，keyof 操作符是在 TypeScript 2.1 版本引入的，該操作符可以用于獲取某種類型的所有鍵，其返回類型是聯(lián)合類型。 “耳聽(tīng)為虛，眼見(jiàn)為實(shí)”，我們來(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

通過(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ì)發(fā)生運(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"'.(2345)

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

3、數(shù)組泛型

let arr:Array<number> =[1,2,3] === let arr:number[]=[1,2,3]

四、泛型參數(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)單，即 <T=Default Type>，對(duì)應(yīng)的使用示例如下：

interface A<T=string> {
  name: T;
}

const strA: A = { name: "Semlinker" };
const numB: A<number> = { name: 101 };

泛型參數(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ō)的條件是類型兼容性約束。盡管以上代碼中使用了 extends 關(guān)鍵字，也不一定要強(qiáng)制滿足繼承關(guān)系，而是檢查是否滿足結(jié)構(gòu)兼容性。

條件類型會(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)類型抽取：

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。

除了上述的應(yīng)用外，利用條件類型和 infer 關(guān)鍵字，我們還可以方便地實(shí)現(xiàn)獲取 Promise 對(duì)象的返回值類型，比如：

async function stringPromise() {
  return "Hello, Semlinker!";
}

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

async function personPromise() {
  return { name: "Semlinker", age: 30 } as Person;
}

type PromiseType<T> = (args: any[]) => Promise<T>;
type UnPromisify<T> = T extends PromiseType<infer U> ? U : never;

type extractStringPromise = UnPromisify<typeof stringPromise>; // string
type extractPersonPromise = UnPromisify<typeof personPromise>; // Person

六、泛型工具類型

1、Partial

partial< T >的作用就是將某個(gè)類型中的屬性全部變?yōu)榭蛇x項(xiàng)?

interface Person {
  name:string;
  age:number;
}
function student<T extends Person>(arg: Partial<T>):Partial<T> {
  return arg;
}

interface Todo {
  title: string;
  description: string;
}

function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>) {
  return { ...todo, ...fieldsToUpdate };
}

const todo1 = {
  title: "organize desk",
  description: "clear clutter"
};

const todo2 = updateTodo(todo1, {
  description: "throw out trash"
});

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

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

2、Record

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

interface PageInfo {
  title: string
}
type Page = 'home'|'about'|'other';
const x: Record<Page, PageInfo> = {
  home: { title: "xxx" },
  about: { title: "aaa" },
  other: { title: "ccc" },
};

3、Pick

Pick<T, K extends keyof T>的作用是將某個(gè)類型中的子屬性挑出來(lái)，變成包含這個(gè)類型部分屬性的子類型，示例：

interface Todo {
  title:string,
  desc:string,
  time:string
}
type TodoPreview = Pick<Todo, 'title'|'time'>;
const todo: TodoPreview ={
  title:'吃飯',
  time:'明天'
}

4、Exclude

Exclude<T,U>的作用是將某個(gè)類型中屬于另一個(gè)類型的屬性移除掉，示例：

type T0 = Exclude<"a" | "b" | "c", "a">; // "b" | "c"
const t:T0 ='b';

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

5、ReturnType

returnType< T >的作用是用于獲取函數(shù)T的返回類型，示例：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-757325.html

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

到了這里，關(guān)于TS泛型，原來(lái)就這？的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！