typescript-泛型

为什么要使用泛型

许多时候，标注的具体类型并不能确定，比如一个函数的参数类型

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

上面的函数，我们想实现的是获取一个对象指定的k所对应的值，那么实际使用的时候，obj的类型是不确定的，自然k的取值范围也是不确定的，他需要我们在具体调用的时候才能确定，这个时候这种定义过程不确定类型的需求就可以通过泛型来解决

泛型的使用-函数

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')

所谓泛型就是给可变（不定）的类型定义变量（参数），<>类似()

泛型接口

我们还可以在接口中使用泛型
后端提供了一些接口，用以返回一些数据，依据返回的数据格式定义如下接口：

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

根据接口我们封装对应的一些方法

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

但是我们会发现，接口的data项的具体格式不定，不同的接口会返回的数据是不一样的，当我们想根据具体当前请求的接口返回具体data格式的时候，就比较麻烦了，因为getData并不清楚你调用的具体接口是什么，对应的数据又会是什么样的，这个时候可以对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
  })
}

定义不同的数据接口

//用户接口
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)