日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

泛型

寫在前面

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

成都創(chuàng)新互聯(lián)憑借在網(wǎng)站建設(shè)、網(wǎng)站推廣領(lǐng)域領(lǐng)先的技術(shù)能力和多年的行業(yè)經(jīng)驗(yàn)，為客戶提供超值的營銷型網(wǎng)站建設(shè)服務(wù)，我們始終認(rèn)為：好的營銷型網(wǎng)站就是好的業(yè)務(wù)員。我們已成功為企業(yè)單位、個(gè)人等客戶提供了成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)服務(wù)，以良好的商業(yè)信譽(yù)，完善的服務(wù)及深厚的技術(shù)力量處于同行領(lǐng)先地位。

什么是泛型?

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

「跳跳」：在歷史中，強(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(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ù)氖穷愋停?不是特定的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("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{ 
  
  
  
  
  //定義了一個(gè)非泛型函數(shù)簽名作為泛型類型的一部分 
  
  
  
  
  (name:T):T; 
  
  
  
  
} 
  
  
  
  
 
  
  
  
  
function func(name:T):T{ 
  
  
  
  
  return name; 
  
  
  
  
} 
  
  
  
  
 
  
  
  
  
// 在使用泛型接口時(shí)，需要傳入一個(gè)類型參數(shù)來指定泛型類型(這里是number)，鎖定了之后代碼里使用的類型 
  
  
  
  
let fxFun: FanxingInter = func; 
  
  
  
  
fxFun("yichuan"); 
 
 
 

我們再看看，泛型如何在類中進(jìn)行使用，定義泛型類的。

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

 
 
 
 
  
  
  
  
interface FxInterface{ 
  
  
  
  
  value:T; 
  
  
  
  
  getValue:()=>T; 
  
  
  
  
} 
  
  
  
  
 
  
  
  
  
class FxClass implements FxInterface{ 
  
  
  
  
  value:T; 
  
  
  
  
  constructor(value:T){ 
  
  
  
  
    this.value = value; 
  
  
  
  
  } 
  
  
  
  
  getValue():T{ 
  
  
  
  
    return this.value; 
  
  
  
  
  } 
  
  
  
  
} 
  
  
  
  
 
  
  
  
  
const myFxClass = new FxClass("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(){} //泛型函數(shù)，尖括號(hào)跟在函數(shù)名后 
  
  
  
  
class Dog{} //泛型類，尖括號(hào)跟在類名后 
  
  
  
  
interface NiuInterface{} //泛型接口，尖括號(hào)跟隨接口名后 
 
 
 

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

泛型約束

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

 
 
 
 
  
  
  
  
function nameFunc(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(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)行檢測。只不過需要通過索引類型查詢操作符：keyof，用于獲取某種類型T所有的鍵，返回類型的公共屬性的聯(lián)合類型。

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

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

 
 
 
 
  
  
  
  
function getProperty(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(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)。

分享文章：【前端】你好，我叫TypeScript 03──數(shù)據(jù)類型
當(dāng)前網(wǎng)址：http://m.5511xx.com/article/dhjdcec.html