TS學習筆記(五):泛型

泛型是指定一個表示類型的變量,用它來代替某個實際的類型用于編程,而后通過實際調用時傳入或推導的類型來對其進行替換,以達到一段使用泛型程序可以實際適應不同類型的目的。為了實現泛型所要達到的目的,我們也可采用指定類型為 any 或者為每一種可能的類型都寫一個方法(重載),但這嚴重違反抽象和復用代碼的原則。所以在考慮可重用組件的時候,我們應該使用泛型。

泛型其實是 C# 和 Java 這種強類型語言中的一個特性,TypeScript 把這一特性引進到了弱類型語言 JavaScript 中,對于沒接觸過強類型語言的前端 coder,理解這個概念可能有點吃力,如果看不太懂,可以先去了解一下 Java 中的泛型,下面進入正題。

初識泛型

定義泛型:我們把要傳入函數的參數類型設為一個類型變量 T ,它能夠幫助我們捕獲用戶傳入的類型,之后出現 T 的地方,都會被替換成用戶傳入的類型。

function identity<T>(arg: T): T {
  return arg;
}

function getFirst<T>(arr: T[]): T {
  return arr[0];
}

console.log(identity(10)); // 10
console.log(identity('TS')); // TS
console.log(getFirst([1, 2, 3, 4])); // 1
console.log(getFirst(['a', 'b', 'c'])); // a

使用泛型:有兩種使用泛型的方式,第一種是傳入所有的參數,包括類型參數;第二種是不傳類型參數,因為 TypeScript 的編譯器會利用類型推論來確定參數的類型,推薦使用第二種。

function identity<T>(arg: T): T {
  return arg;
}

function getFirst<T>(arr: T[]): T {
  return arr[0];
}

// 使用一:傳入所有參數
console.log(identity<number>(10)); // 10
console.log(identity<string>('TS')); // TS
console.log(getFirst<number>([1, 2, 3, 4])); // 1
console.log(getFirst<string>(['a', 'b', 'c'])); // a
// 使用二:不傳參數類型
console.log(identity(10)); // 10
console.log(identity('TS')); // TS
console.log(getFirst([1, 2, 3, 4])); // 1
console.log(getFirst(['a', 'b', 'c'])); // a

泛型類型

一個泛型函數的類型如下:

<泛型變量名稱>(參數1: 泛型變量, 參數2: 泛型變量, ...參數n: 泛型變量) => 泛型變量

可以以對象字面量的形式來定義泛型函數(這更像是接口),如:

let foo: { <T>(arg: T): void };
foo = function <T>(arg: T): void {
  console.log(arg);
}
foo(13); // 13

將上面的例子中的 { <T>(arg: T): void }改為接口,則有:

interface IGeneric {
  <T>(arg: T): void
}
let foo: IGeneric = function <T>(arg: T): void {
  console.log(arg)
}
foo(13); // 13

最后,接口中也可以使用泛型,這樣子就鎖定了代碼里可以使用的類型,如:

interface IGeneric<T> {
  (arg: T): void
}

function fn<T>(arg: T): void {
  console.log(arg);
}

let myFn: IGeneric<number> = fn;
myFn(13); //13

泛型類

除了泛型接口,我們還可以創建泛型類(但是無法創建泛型枚舉、泛型命名空間),泛型類使用 <> 包圍泛型類型變量,如:

class Person<T> {
  love: T;
  say: (arg: T) => T;
}

let me = new Person<string>();
me.love = 'TS';
// me.love = 520; // ERROR
me.say = function(love: string){
  return `my love is ${love}`;
}

console.log(me.say('TS')); // my love is TS

注意:類有兩部分,分為靜態部分和實例部分,泛型類的類型指的是實例部分的類型,靜態屬性不能使用該泛型類型。

泛型約束

泛型可以通過 extends 一個接口來實現泛型約束,寫法如:<泛型變量 extends 接口> ,例子:

interface IArray {
  length: number
}

function logIndex<T extends IArray>(arg: T): void {
  for (let i = 0; i < arg.length; ++i) {
    console.log(i)
  }
}

let arr = [1, 2, 3]
// logIndex<number>(arr) // 報錯
logIndex<number[]>(arr) // 允許
logIndex(arr) // 自動類型推導,允許

可以在泛型里使用類類型,如使用泛型創建工廠函數,需要引用構造函數的類類型,有:

function create<T>(c: { new(): T }): T {
  return new c()
}

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,967評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,273評論 3 415
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 175,870評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,742評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,527評論 6 407
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,010評論 1 322
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,108評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,250評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,769評論 1 333
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,656評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,853評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,371評論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,103評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,472評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,717評論 1 281
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,487評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,815評論 2 372

推薦閱讀更多精彩內容

  • 這是16年5月份編輯的一份比較雜亂適合自己觀看的學習記錄文檔,今天18年5月份再次想寫文章,發現簡書還為我保存起的...
    Jenaral閱讀 2,803評論 2 9
  • 對象的創建與銷毀 Item 1: 使用static工廠方法,而不是構造函數創建對象:僅僅是創建對象的方法,并非Fa...
    孫小磊閱讀 2,008評論 0 3
  • 與Java泛型相同,Kotlin同樣提供了泛型支持。對于簡單的泛型類、泛型函數的定義,Kotlin 與 Java ...
    凌寒天下獨自舞閱讀 275評論 0 0
  • C# 泛型(Generics) 泛型概述 泛型是C#編程語言的一部分,它與程序集中的IL(Intermediate...
    OctOcean閱讀 2,256評論 0 4
  • object 變量可指向任何類的實例,這讓你能夠創建可對任何數據類型進程處理的類。然而,這種方法存在幾個嚴重的問題...
    CarlDonitz閱讀 925評論 0 5