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

RELATEED CONSULTING
相關(guān)咨詢(xún)
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
面試官：說(shuō)說(shuō)你對(duì) TypeScript 中泛型的理解？應(yīng)用場(chǎng)景？

本文轉(zhuǎn)載自微信公眾號(hào)「JS每日一題」，作者灰灰。轉(zhuǎn)載本文請(qǐng)聯(lián)系JS每日一題公眾號(hào)。

專(zhuān)注于為中小企業(yè)提供成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)愛(ài)民免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千多家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

一、是什么

泛型程序設(shè)計(jì)(generic programming)是程序設(shè)計(jì)語(yǔ)言的一種風(fēng)格或范式

泛型允許我們?cè)趶?qiáng)類(lèi)型程序設(shè)計(jì)語(yǔ)言中編寫(xiě)代碼時(shí)使用一些以后才指定的類(lèi)型，在實(shí)例化時(shí)作為參數(shù)指明這些類(lèi)型 在typescript中，定義函數(shù)，接口或者類(lèi)的時(shí)候，不預(yù)先定義好具體的類(lèi)型，而在使用的時(shí)候在指定類(lèi)型的一種特性

假設(shè)我們用一個(gè)函數(shù)，它可接受一個(gè) number 參數(shù)并返回一個(gè)number 參數(shù)，如下寫(xiě)法：

 
 
 
 
      
  
  
  
  1. function returnItem (para: number): number { 
    2.   
  
  
  
  2.     return para 
    3.   
  
  
  
  3. } 
    4.

如果我們打算接受一個(gè) string 類(lèi)型，然后再返回 string類(lèi)型，則如下寫(xiě)法：

 
 
 
 
      
  
  
  
  1. function returnItem (para: string): string { 
    2.   
  
  
  
  2.     return para 
    3.   
  
  
  
  3. } 
    4.

上述兩種編寫(xiě)方式，存在一個(gè)最明顯的問(wèn)題在于，代碼重復(fù)度比較高

雖然可以使用 any類(lèi)型去替代，但這也并不是很好的方案，因?yàn)槲覀兊哪康氖墙邮帐裁搭?lèi)型的參數(shù)返回什么類(lèi)型的參數(shù)，即在運(yùn)行時(shí)傳入?yún)?shù)我們才能確定類(lèi)型

這種情況就可以使用泛型，如下所示：

 
 
 
 
      
  
  
  
  1. function returnItem(para: T): T { 
    2.   
  
  
  
  2.     return para 
    3.   
  
  
  
  3. } 
    4.

可以看到，泛型給予開(kāi)發(fā)者創(chuàng)造靈活、可重用代碼的能力

二、使用方式

泛型通過(guò)<>的形式進(jìn)行表述，可以聲明：

  • 函數(shù)
  • 接口
  • 類(lèi)

函數(shù)聲明

聲明函數(shù)的形式如下：

 
 
 
 
      
  
  
  
  1. function returnItem(para: T): T { 
    2.   
  
  
  
  2.     return para 
    3.   
  
  
  
  3. } 
    4.

定義泛型的時(shí)候，可以一次定義「多個(gè)類(lèi)型參數(shù)」，比如我們可以同時(shí)定義泛型 T 和 泛型 U：

 
 
 
 
      
  
  
  
  1. function swap(tuple: [T, U]): [U, T] { 
    2.   
  
  
  
  2.     return [tuple[1], tuple[0]]; 
    3.   
  
  
  
  3. } 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. swap([7, 'seven']); // ['seven', 7] 
    6.

接口聲明

聲明接口的形式如下：

 
 
 
 
      
  
  
  
  1. interface ReturnItemFn { 
    2.   
  
  
  
  2.     (para: T): T 
    3.   
  
  
  
  3. } 
    4.

那么當(dāng)我們想傳入一個(gè)number作為參數(shù)的時(shí)候，就可以這樣聲明函數(shù):

 
 
 
 
      
  
  
  
  1. const returnItem: ReturnItemFn = para => para 
    2.

類(lèi)聲明

使用泛型聲明類(lèi)的時(shí)候，既可以作用于類(lèi)本身，也可以作用于類(lèi)的成員函數(shù)

下面簡(jiǎn)單實(shí)現(xiàn)一個(gè)元素同類(lèi)型的棧結(jié)構(gòu)，如下所示：

 
 
 
 
      
  
  
  
  1. class Stack { 
    2.   
  
  
  
  2.     private arr: T[] = [] 
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.     public push(item: T) { 
    5.   
  
  
  
  5.         this.arr.push(item) 
    6.   
  
  
  
  6.     } 
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8.     public pop() { 
    9.   
  
  
  
  9.         this.arr.pop() 
    10.   
  
  
  
  10.     } 
    11.   
  
  
  
  11. } 
    12.

使用方式如下：

 
 
 
 
      
  
  
  
  1. const stack = new Stacn() 
    2.

如果上述只能傳遞 string 和 number 類(lèi)型，這時(shí)候就可以使用 的方式猜實(shí)現(xiàn)「約束泛型」，如下所示：

除了上述的形式，泛型更高級(jí)的使用如下：

例如要設(shè)計(jì)一個(gè)函數(shù)，這個(gè)函數(shù)接受兩個(gè)參數(shù)，一個(gè)參數(shù)為對(duì)象，另一個(gè)參數(shù)為對(duì)象上的屬性，我們通過(guò)這兩個(gè)參數(shù)返回這個(gè)屬性的值

這時(shí)候就設(shè)計(jì)到泛型的索引類(lèi)型和約束類(lèi)型共同實(shí)現(xiàn)

索引類(lèi)型、約束類(lèi)型

索引類(lèi)型 keyof T 把傳入的對(duì)象的屬性類(lèi)型取出生成一個(gè)聯(lián)合類(lèi)型，這里的泛型 U 被約束在這個(gè)聯(lián)合類(lèi)型中，如下所示：

 
 
 
 
      
  
  
  
  1. function getValue(obj: T, key: U) { 
    2.   
  
  
  
  2.   return obj[key] // ok 
    3.   
  
  
  
  3. } 
    4.

上述為什么需要使用泛型約束，而不是直接定義第一個(gè)參數(shù)為 object類(lèi)型，是因?yàn)槟J(rèn)情況 object 指的是{}，而我們接收的對(duì)象是各種各樣的，一個(gè)泛型來(lái)表示傳入的對(duì)象類(lèi)型，比如 T extends object

使用如下圖所示：

多類(lèi)型約束

例如如下需要實(shí)現(xiàn)兩個(gè)接口的類(lèi)型約束：

 
 
 
 
      
  
  
  
  1. interface FirstInterface { 
    2.   
  
  
  
  2.   doSomething(): number 
    3.   
  
  
  
  3. } 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. interface SecondInterface { 
    6.   
  
  
  
  6.   doSomethingElse(): string 
    7.   
  
  
  
  7. } 
    8.

可以創(chuàng)建一個(gè)接口繼承上述兩個(gè)接口，如下：

 
 
 
 
      
  
  
  
  1. interface ChildInterface extends FirstInterface, SecondInterface { 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. } 
    4.

正確使用如下：

 
 
 
 
      
  
  
  
  1. class Demo { 
    2.   
  
  
  
  2.   private genericProperty: T 
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.   constructor(genericProperty: T) { 
    5.   
  
  
  
  5.     this.genericProperty = genericProperty 
    6.   
  
  
  
  6.   } 
    7.   
  
  
  
  7.   useT() { 
    8.   
  
  
  
  8.     this.genericProperty.doSomething() 
    9.   
  
  
  
  9.     this.genericProperty.doSomethingElse() 
    10.   
  
  
  
  10.   } 
    11.   
  
  
  
  11. } 
    12.

通過(guò)泛型約束就可以達(dá)到多類(lèi)型約束的目的

三、應(yīng)用場(chǎng)景

通過(guò)上面初步的了解，后述在編寫(xiě) typescript 的時(shí)候，定義函數(shù)，接口或者類(lèi)的時(shí)候，不預(yù)先定義好具體的類(lèi)型，而在使用的時(shí)候在指定類(lèi)型的一種特性的時(shí)候，這種情況下就可以使用泛型

靈活的使用泛型定義類(lèi)型，是掌握typescript 必經(jīng)之路

參考文獻(xiàn)

https://www.tslang.cn/docs/handbook/generics.html


本文名稱(chēng)：面試官：說(shuō)說(shuō)你對(duì) TypeScript 中泛型的理解？應(yīng)用場(chǎng)景？
URL標(biāo)題：http://www.5511xx.com/article/dphedsg.html