[[400582]]

泛型

寫在前面

今天是520，祝大家有情人終成眷屬吧，咱們也應(yīng)應(yīng)景，解鎖兩個(gè)新英雄：蹦蹦和跳跳，探索以全新的問答視角來介紹和解決亟需處理的問題。

什么是泛型?

「蹦蹦」：跳跳，你曉得啥子是泛型嘛?

「跳跳」：在歷史中，強(qiáng)者高手都是考慮現(xiàn)在和未來的，只有宏觀把握才能讓自己立于不敗之地。就像你耍游戲撒，不管你要出啥子大件裝備，你先買一雙孩子或者多蘭劍、藍(lán)色戒指你就不會(huì)錯(cuò)撒，反正都是要在這個(gè)方面拓展。

而在面向?qū)ο蟮木幊陶Z言中，組件不僅要考慮到現(xiàn)在的數(shù)據(jù)類型，還要考慮到未來要使用的數(shù)據(jù)類型，而「泛型」完美的提供了組件的「可復(fù)用性」，提高組件的靈活性。曉得咯不?

為什么要設(shè)計(jì)泛型?

「蹦蹦」：跳跳，那么為什么要設(shè)計(jì)泛型撒?

「跳跳」：設(shè)計(jì)泛型的目的就是在成員之間提供有意義的約束，而這些成員包括：類的實(shí)例成員、類的方法、函數(shù)參數(shù)和函數(shù)返回值。

「跳跳」：JS老哥他是作為一門動(dòng)態(tài)語言存在的，存在很大的靈活性，只有在執(zhí)行過程中變量賦值了，你才曉得這個(gè)變量是啥子類型的。那么這就存在一個(gè)隱患，我不曉得要事先賦值啥子類型的變量，那么在執(zhí)行過程中就會(huì)存在類型不對(duì)的錯(cuò)誤，這就降低了代碼的可維護(hù)性。而TS中有三種方法可以解決JS的可復(fù)用性差、可維護(hù)性差等問題，那么我們來看看是哪些：

函數(shù)重載

function getVal(val: number): number  
function getVal(val: string):string  
function getVal(val: any):any { 
   return val; 
} 

聯(lián)合類型

function getVal(val: string | number | any[]):string | number | any[] { 
  return val; 
} 

在追求代碼的簡潔可讀的時(shí)代，你寫這又臭又長的代碼是幾個(gè)意思，有點(diǎn)瓜兮兮。而TS小老弟還是會(huì)來事，提前考慮到了這些問題，提供泛型方式來解決這些問題。

泛型

function getVal<T>(val: T): T { 
   return val; 
} 

解釋哈泛型的規(guī)則，上面的「T表示的是待捕獲函數(shù)傳入?yún)?shù)類型(Type)，在函數(shù)內(nèi)部使用T可用于該參數(shù)類型聲明其他變量」。實(shí)際上T并不是固定的，可以用任何有效名稱替代。比如：

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

如何使用泛型?「蹦蹦」：那么愣個(gè)使用泛型撒?

「跳跳」：愣個(gè)使用泛型，系好安全帶，我們要出發(fā)了。

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

「蹦蹦」：講的還是挺詳細(xì)的哈，那么那個(gè)<>里面可以寫兩個(gè)變量類型不?

「跳跳」：這個(gè)肯定闊以撒，哪怕你兩個(gè)，兩百個(gè)都闊以。我就舉個(gè)栗子撒，我們闊以看到下面的代碼中，用了兩個(gè)類型變量⽤于擴(kuò)展我們定義的 identity 函數(shù)：

除了為類型變量顯式設(shè)定值之外，⼀種更常⻅的做法是使編譯器⾃動(dòng)選擇這些類型，從⽽使代碼更簡潔。我們可以完全省略尖括號(hào)，利用了類型推論──即編譯器會(huì)根據(jù)傳入的參數(shù)自動(dòng)地幫助我們確定T的類，類型推論幫助我們保持代碼精簡和高可讀性。

let output = identity<string>("myString");  // type of output will be 'string' 
 
let output = identity("myString");  // type of output will be 'string' 

泛型接口和泛型類

「蹦蹦」：跳跳，我昨天看到「一川」寫的關(guān)于接口的文章，看到有對(duì)象接口、類接口啥的，泛型是不是也有相關(guān)的概念。

「跳跳」：不錯(cuò)哈，都會(huì)進(jìn)行搶答了。我們先看看泛型接口：

interface  FanxingInter<T>{ 
  //定義了一個(gè)非泛型函數(shù)簽名作為泛型類型的一部分 
  (name:T):T; 
} 
 
function func<T>(name:T):T{ 
  return name; 
} 
 
// 在使用泛型接口時(shí)，需要傳入一個(gè)類型參數(shù)來指定泛型類型(這里是number)，鎖定了之后代碼里使用的類型 
let fxFun: FanxingInter<string> = func; 
fxFun("yichuan"); 

我們?cè)倏纯?，泛型如何在類中進(jìn)行使用，定義泛型類的。

其實(shí)，泛型類看上去與泛型接口差不多。泛型類使用(<>)括起泛型類型，跟在類名后面，用于定義任意多個(gè)類型變量。

interface FxInterface<T>{ 
  value:T; 
  getValue:()=>T; 
} 
 
class FxClass<T> implements FxInterface<T>{ 
  value:T; 
  constructor(value:T){ 
    this.value = value; 
  } 
  getValue():T{ 
    return this.value; 
  } 
} 
 
const myFxClass = new FxClass<string>("yichuan"); 
console.log(myFxClass.getValue()); 

調(diào)用過程：

• 先實(shí)例化對(duì)象FxClass，傳入string類型的參數(shù)值"yichuan";
• 在FxClass類中，類型變量T的值變成string類型;
• FxClass類實(shí)現(xiàn)了FxInterface，此時(shí)T表示的是string類型，即實(shí)現(xiàn)了泛型接口;

我們歸納一下，就是：

function Func<T>(){} //泛型函數(shù)，尖括號(hào)跟在函數(shù)名后 
class Dog<T>{} //泛型類，尖括號(hào)跟在類名后 
interface NiuInterface<T>{} //泛型接口，尖括號(hào)跟隨接口名后 

「跳跳」：蹦蹦，泛型接口和泛型類，懂了不。

泛型約束

「蹦蹦」：懂了。我突然想到一個(gè)問題，如果想要去操作某類型對(duì)應(yīng)的某些屬性，比如說訪問參數(shù)name的length，編譯器為什么會(huì)報(bào)錯(cuò)?

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

「跳跳」：這個(gè)問題挺不錯(cuò)了，說明你對(duì)泛型整挺好哈。我們看到，因?yàn)榫幾g器也不知道你輸入的參數(shù)類型T是否具有l(wèi)ength屬性，要解決它可以讓那個(gè)類型變量extends含有所需屬性的接口。

interface Length{ 
  length: number; 
} 
 
function idenLength<T extends Length>(name: T):T{ 
  console.log(name.length); 
  return name; 
} 

T extends Length是對(duì)泛型的約束，告訴編譯器已經(jīng)支持Length接口的任何類型。對(duì)于使用不含length屬性的對(duì)象作為參數(shù)調(diào)用函數(shù)時(shí)，ts會(huì)提示相應(yīng)的錯(cuò)誤信息：

console.log(idenLength(18));//Error 

此外，我們還可以使⽤ , 號(hào)來分隔多種約束類型，⽐如： 。⽽對(duì)于上述的 length 屬性問題來說，如果我們顯式地將變量設(shè)置為數(shù)組類型，也可以解決該問題。

高端玩家──索引類型

「蹦蹦」：泛型中如何檢查對(duì)象的鍵是否存在呢?

「跳跳」：其實(shí)也很簡單，同樣使用泛型約束進(jìn)行檢測(cè)。只不過需要通過索引類型查詢操作符：keyof，用于獲取某種類型T所有的鍵，返回類型的公共屬性的聯(lián)合類型。

interface Person{ 
  name:string; 
  age:number; 
} 
let personProps: keyof Person;//"name" | "age" 

我們就可以結(jié)合前⾯介紹的 extends 約束，即限制輸⼊的屬性名包含在 keyof 返回的聯(lián)合類型中。

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

在以上的 getProperty 函數(shù)中，我們通過 K extends keyof T確保參數(shù) key⼀定是對(duì)象中含有的鍵，這樣就不會(huì)發(fā)⽣運(yùn)⾏時(shí)錯(cuò)誤。

class BeeKeeper { 
    hasMask: boolean; 
} 
 
class ZooKeeper { 
    nametag: string; 
} 
 
class Animal { 
    numLegs: number; 
} 
 
class Bee extends Animal { 
    keeper: BeeKeeper; 
} 
 
class Lion extends Animal { 
    keeper: ZooKeeper; 
} 
 
function createInstance<A extends Animal>(c: new () => A): A { 
    return new c(); 
} 
 
createInstance(Lion).keeper.nametag;  // typechecks! 
createInstance(Bee).keeper.hasMask;   // typechecks! 

「蹦蹦」：懂了，懂了，就是有點(diǎn)復(fù)雜，得去捋一捋。

小結(jié)

「跳跳」：其實(shí)本篇文章主要介紹了：泛型的概念、泛型接口和泛型類、泛型約束以及索引類型等等。

參考文章

• 阿寶哥的《重學(xué)TS》
• 《ts中文文檔》

本文轉(zhuǎn)載自微信公眾號(hào)「前端萬有引力」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系前端萬有引力眾號(hào)。