為什么要使用泛型

許多時(shí)候，標(biāo)注的具體類型并不能確定，比如一個(gè)函數(shù)的參數(shù)類型

function getVal(obj,k){
  return obj[k]
}

上面的函數(shù)，我們想實(shí)現(xiàn)的是獲取一個(gè)對(duì)象指定的k所對(duì)應(yīng)的值，那么實(shí)際使用的時(shí)候，obj的類型是不確定的，自然k的取值范圍也是不確定的，他需要我們?cè)诰唧w調(diào)用的時(shí)候才能確定，這個(gè)時(shí)候這種定義過(guò)程不確定類型的需求就可以通過(guò)泛型來(lái)解決

泛型的使用-函數(shù)

function getVal<T>(obj:T,k:keyof T){
  return obj[k]
}
let obj1 = {
  x:10,
  y:20
}
let obj2 = {
  name: 'leo',
  age: 30
}
getVal<typeof obj1>(obj1,'x')
getVal<typeof obj2>(obj2,'name')

所謂泛型就是給可變（不定）的類型定義變量（參數(shù)），<>類似()

泛型接口

我們還可以在接口中使用泛型
后端提供了一些接口，用以返回一些數(shù)據(jù)，依據(jù)返回的數(shù)據(jù)格式定義如下接口：

interface IResponseData {
  code: nomber;
  message?:string;
  data:any;
}

根據(jù)接口我們封裝對(duì)應(yīng)的一些方法

function getData(url:string){
  return fetch(url).then(res=>{
    return res.json();
  }).then((data:IResponseData )=>{
     return data
  })
}

但是我們會(huì)發(fā)現(xiàn)，接口的data項(xiàng)的具體格式不定，不同的接口會(huì)返回的數(shù)據(jù)是不一樣的，當(dāng)我們想根據(jù)具體當(dāng)前請(qǐng)求的接口返回具體data格式的時(shí)候，就比較麻煩了，因?yàn)間etData并不清楚你調(diào)用的具體接口是什么，對(duì)應(yīng)的數(shù)據(jù)又會(huì)是什么樣的，這個(gè)時(shí)候可以對(duì)IResponseData 使用泛型

interface IResponseData<T>{
  code: nomber;
  message?:string;
  data: T;
}
function getData<U>(url:string){
  return fetch(url).then(res=>{
    return res.json();
  }).then((data:IResponseData<U> )=>{
     return data
  })
}

定義不同的數(shù)據(jù)接口

//用戶接口
interface IResponseUserData{
  id:number;
  username:string;
  email:string;
}
//文章接口
interface IResponseArticalData{
  id: number;
  title: string;
  author: IResponseUserData;
}
function getData<U>(url:string){
  return fetch(url).then(res=>{
    return res.json();
  }).then((data:IResponseData<U> )=>{
     return data
  })
}
getData<IResponseUserData>(url)