技術標籤：TypeScript前端程式設計javascripttypescript前端

一、什麼是泛型

軟體工程中，我們不僅要建立一致的定義良好的API，同時也要考慮可重用性。 元件不僅能夠支援當前的資料型別，同時也能支援未來的資料型別，這在建立大型系統時為你提供了十分靈活的功能。
在像C#和Java這樣的語言中，可以使用泛型來建立可重用的元件，一個元件可以支援多種型別的資料。 這樣使用者就可以以自己的資料型別來使用元件。

在定義函式或者類時，如果遇到型別不明確的情況可以使用泛型。

二、函式中泛型的使用

這是是輸入某個值，並將此制輸出的過程，因為不清楚輸入值的型別，所以可以使用泛型。泛型在呼叫的過程中，可以明確指定泛型，也可以不指定但TS會自動推斷型別。

function fun<T>(a:T):T {
  return a;
}
//可以直接呼叫具有泛型的函式
console.log(fun(10));//不指定泛型，TS可以自動推斷型別
console.log(fun<string>("ts"));//指定泛型

三、泛型可以指定多個

//泛型可以指定多個
function fn<T,K>(a:T,b:K):T {
  console.log(b);
  return a;
}
fn<String,number>("ts",10);
console.log(fn<
 
String,number>("ts",10));

四、類中泛型的使用

這裡Class類中name型別不明確，所以採用泛型。

class Class<T> {
  name:T;
  constructor(name:T){
    this.name=name;
  }
}
let c1=new Class<number>(10);
console.log(c1)

let c2=new Class<string>('js');
console.log(c2)

五、泛型可以繼承其他型別

第一個是介面作為型別宣告，其中泛型是介面的實現類

interface Inters{
  length:number;
}
//這裡用到了介面，其中泛型是介面的實現類
function f<T extends Inters>(a:T):number {
  return a.length;
}
console.log(f({length:10}))


function fu<T extends number>(a:T):T {
  return a;
}
console.log(fu(10))