中文網：https://www.tslang.cn/

官網：http://www.typescriptlang.org/

目錄：

• Typescript 學習筆記一：介紹、安裝、編譯
• Typescript 學習筆記二：資料型別
• Typescript 學習筆記三：函式
• Typescript 學習筆記四：回憶Es5 中的類
• Typescript 學習筆記五：類
• Typescript 學習筆記六：介面
• Typescript 學習筆記七：泛型

泛型的定義

泛型：軟體工程中，我們不僅要建立一致的定義良好的 API，同時也要考慮可重用性。 元件不僅能夠支援當前的資料型別，同時也能支援未來的資料型別，這在建立大型系統時為你提供了十分靈活的功能。

在像C#和Java這樣的語言中，可以使用泛型來建立可重用的元件，一個元件可以支援多種型別的資料。這樣使用者就可以以自己的資料型別來使用元件。

通俗理解：泛型就是解決類、介面、方法的複用性、以及對不特定資料型別的支援(型別校驗)。

function getData (val:string):string {
  return val;
}

只能返回string型別的資料，要求能同時返回 string 型別和 number 型別

function getData1 (val:string):string {
  return val;
}
function getData2 (val:number):number {
  return val;
}
 

程式碼冗餘，any 型別可以解決這個問題。

function getData (val:any):any {
  return val;
}
getData(124);
getData('124');

但是 any 相當於放棄了型別檢查。沒法實現傳入什麼，返回什麼。比如:傳入 number 型別必須返回 number 型別，傳入 string 型別必須返回 string 型別。

function getData (val:any):any {
  return val + '---';
}
getData(124); // 傳入 number，返回 string

泛型：可以支援不特定的資料型別。要求：傳入的引數和返回的引數一致。

T表示泛型，具體什麼型別是在呼叫這個方法的時候決定的

泛型函式

function getData<T> (val:T):T {
  return val;
}
getData<number>(124);
getData<string>('abc');
// getData<number>('abc'); // 錯誤

放回值可以是任意型別

function getData<T> (val:T):any {
  return val + '***';
}
getData<number>(124); // 引數必須是數字
getData<string>('abc');

泛型類

比如有個最小堆演算法，需要同時支援返回數字和字串 a-z 兩種型別。通過類的泛型來實現

class minClass {
  list:number[] = [];

  add (val:number):void {
    this.list.push(val);
  }

  min ():number {
    let minNum:number = this.list[0];
    for(let i = 0; i < this.list.length; i++) {
      if(minNum > this.list[i]){
          minNum = this.list[i];
      }
    }
    return minNum;
  }
}
let m = new minClass();
m.add(3);
m.add(2);
m.add(23);
console.log(m.min()); // 2

正常的類只能實現一種型別。用泛型解決，支援 number 和 string。

class minClass<T> {
  list:T[] = [];

  add (val:T):void {
    this.list.push(val);
  }

  min ():T {
    let minNum = this.list[0];
    for(let i = 0; i < this.list.length; i++) {
      if(minNum > this.list[i]){
          minNum = this.list[i];
      }
    }
    return minNum;
  }
}
let m1 = new minClass<number>(); // 例項化類，並且指定了類的 T 代表的型別是 number
m1.add(3);
m1.add(2);
m1.add(23);
console.log(m1.min()); // 2

let m2 = new minClass<string>(); // 例項化類，並且指定了類的 T 代表的型別是 string
m2.add('a');
m2.add('d');
m2.add('f');
console.log(m2.min()); // a

泛型介面

函式型別介面

interface configFn {
  (val1:string, val2:string):string;
}
let setData:configFn = function (value1:string, value2:string):string { // 引數名可以和介面中的不一致，但是引數型別必須一致
  return value1 + value2;
}
setData('1', '2');

泛型介面實現方式1：

interface configFn {
  <T>(val:T):T;
}
let getData:configFn = function<T> (value:T):T {
  return value;
}
getData<string>('abc');
getData<number>(123);

泛型介面實現方式2：

interface configFn<T> {
  (val:T):T;
}
let getData:configFn<string> = function<T> (value:T):T {
  return value;
}
getData('abc');
getData(123); // 錯誤

這是最後一篇，之後更深入的學習和應用了，再繼續。^_^