Typescript 學習筆記七:泛型

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

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

目錄:

泛型的定義

泛型:軟件工程中,我們不僅要創(chuàng)建一致的定義良好的 API,同時也要考慮可重用性。 組件不僅能夠支持當前的數據類型,同時也能支持未來的數據類型,這在創(chuàng)建大型系統時為你提供了十分靈活的功能。

在像C#和Java這樣的語言中,可以使用泛型來創(chuàng)建可重用的組件,一個組件可以支持多種類型的數據。這樣用戶就可以以自己的數據類型來使用組件。

通俗理解:泛型就是解決接口、方法的復用性、以及對不特定數據類型的支持(類型校驗)。

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); // 錯誤

這是最后一篇,之后更深入的學習和應用了,再繼續(xù)。_

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • this.props對象的屬性與組件的屬性一一對應,但是有個例外:this.props.children,他表示組...
    Wang_Yong閱讀 1,474評論 0 0
  • 今天給大家分享的時新媒體的內容。大家在做今日頭條發(fā)布視頻的時候,系統經常提示你的視頻重復,有沒有想過,怎么解決這個...
    好啊我們閱讀 4,525評論 0 0
  • 文/木水心 前兩天,郭德綱和曹云金的師徒撕逼大戰(zhàn)激烈上演,引來吃瓜群眾廣泛圍觀。有人調侃,說郭曹師徒二人文章寫得好...
    木水心聲閱讀 524評論 0 1
  • 今天是易效能2.0班級踐行第84天,也是3.0班踐行第4天,今天5點鐘按時起床,在4組順利完成打卡,實現了自己心中...
    189期11組8號劉菲閱讀 215評論 0 0

友情鏈接更多精彩內容