Typescript - 基礎(chǔ)(四)

泛型

1姓赤、什么是泛型

當需要一個函數(shù)或類支持多種數(shù)據(jù)類型時刊苍,具有很高的靈活性既们,此時泛型就出現(xiàn)了。

泛型的含義為:不預(yù)先確定函數(shù)類型正什,具體的類型在使用時才確認啥纸。

function log(value:string):string {      // 目前只接受字符串類型的參數(shù)
  console.log(value);
  return value;
}
// 如果接受一個字符串數(shù)組,可通過函數(shù)重載實現(xiàn)
function log (value: string): string;
function log (value: string[]): string [];
function log (value: any) {
  console.log(value);
  return value;
}
// 聯(lián)合類型也可實現(xiàn)
function log (value: string | string []) :string | string [] {
  console.log(value);
  return value;
}
// 如果接受任何類型的參數(shù)該如何處理
// 方法: any
function log (value: any) {        // 但是此方法忽略了輸入的類型和返回的類型必須是一致的這種關(guān)系
  console.log(value);
  return value;
}
// 使用泛型實現(xiàn)
function log<T>(value: T): T {      // 類型 T 不需要預(yù)先的指定婴氮,可保證輸入?yún)?shù)類型和輸出是一致的
   console.log(T);
   return T;
}
// 使用時斯棒,可直接指定數(shù)據(jù)的類型
log<string[]>(['a','b']);
log(['a','b']);      // 利用 ts 的類型推斷,不指定數(shù)據(jù)類型

2主经、泛型函數(shù)與泛型接口

2.1 泛型函數(shù)

泛型可以定義函數(shù)荣暮,也可以定義函數(shù)類型;

// 泛型函數(shù)的實現(xiàn)
type Log = <T>(value: T): T;
let mylog :Log = log;

2.2 泛型接口

interface Log {
  <T>(value: T): T        // 只約束方法
}
interface Log<T> {      // 約束所有成員類型
  (value: T): T
}

3罩驻、泛型類與泛型約束

3.1 泛型類

泛型可以約束類的成員

class Log<T> {   // 將泛型類放在類名的后面穗酥,可以約束所有的成員
    run(value: T) {
        console.log(value)
        return value
    }
}

需要注意的是,泛型不能用于類的靜態(tài)成員惠遏。如果此時 run 的修飾符為 static砾跃,那么編譯器會報錯:靜態(tài)類型不能引用類類型參數(shù)。根據(jù)以上节吮,實例化一個方法:

let log1 = new Log<number>();        // 實例化的時候抽高,需要指定泛型的類型
log1.run(1);      // 此時入?yún)⒅荒苁?number 類型

let log2 = new Log();      // 如果不指定類型,那么成員入?yún)⒖墒侨我忸愋?log2.run({});

3.2 泛型約束

改造一下 log 方法:

function log<T>(value: T): T {
    console.log(value, value.length);      // 打印 value 的屬性透绩,此時會報錯厨内, T 類型上不存在 length 屬性
    return value;
}

此時需要使用類型約束。定義一個接口渺贤,然后讓 T 繼承字這個接口:

interface Length {
    length: number
}
function log<T extends Length>(value: T): T {      // 此時,T 收到類型約束请毛,不是所有類型都可以傳入志鞍,輸入的參數(shù)不管是什么類型,但是必須具有 length 屬性
    console.log(value, value.length);
    return value;
}
// 只要入?yún)в?length 屬性即可
log([1])
log('123')
log({ length: 3 })

總結(jié)方仿,泛型的優(yōu)點在于:

  • 函數(shù)和類可以輕松的支持多種類型固棚,增強程序的擴展性
  • 不必寫多條函數(shù)重載,冗長的聯(lián)合類型聲明仙蚜,增強代碼可讀性
  • 靈活控制類型之間的約束
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末此洲,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子委粉,更是在濱河造成了極大的恐慌呜师,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,509評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件贾节,死亡現(xiàn)場離奇詭異汁汗,居然都是意外死亡衷畦,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評論 3 394
  • 文/潘曉璐 我一進店門知牌,熙熙樓的掌柜王于貴愁眉苦臉地迎上來祈争,“玉大人,你說我怎么就攤上這事角寸∑谢欤” “怎么了?”我有些...
    開封第一講書人閱讀 163,875評論 0 354
  • 文/不壞的土叔 我叫張陵扁藕,是天一觀的道長沮峡。 經(jīng)常有香客問我,道長纹磺,這世上最難降的妖魔是什么帖烘? 我笑而不...
    開封第一講書人閱讀 58,441評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮橄杨,結(jié)果婚禮上秘症,老公的妹妹穿的比我還像新娘。我一直安慰自己式矫,他們只是感情好乡摹,可當我...
    茶點故事閱讀 67,488評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著采转,像睡著了一般聪廉。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上故慈,一...
    開封第一講書人閱讀 51,365評論 1 302
  • 那天板熊,我揣著相機與錄音,去河邊找鬼察绷。 笑死干签,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的拆撼。 我是一名探鬼主播容劳,決...
    沈念sama閱讀 40,190評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼闸度!你這毒婦竟也來了竭贩?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,062評論 0 276
  • 序言:老撾萬榮一對情侶失蹤莺禁,失蹤者是張志新(化名)和其女友劉穎留量,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,500評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡肪获,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,706評論 3 335
  • 正文 我和宋清朗相戀三年寝凌,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片孝赫。...
    茶點故事閱讀 39,834評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡较木,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出青柄,到底是詐尸還是另有隱情伐债,我是刑警寧澤,帶...
    沈念sama閱讀 35,559評論 5 345
  • 正文 年R本政府宣布致开,位于F島的核電站峰锁,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏双戳。R本人自食惡果不足惜虹蒋,卻給世界環(huán)境...
    茶點故事閱讀 41,167評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望飒货。 院中可真熱鬧魄衅,春花似錦、人聲如沸塘辅。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,779評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽扣墩。三九已至哲银,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間呻惕,已是汗流浹背荆责。 一陣腳步聲響...
    開封第一講書人閱讀 32,912評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留亚脆,地道東北人草巡。 一個月前我還...
    沈念sama閱讀 47,958評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像型酥,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子查乒,可洞房花燭夜當晚...
    茶點故事閱讀 44,779評論 2 354