从一行代码学习Typescript泛型语法

typescript 复制代码

// base.ts
...
//接口名为getList
getList: () => request.get<null, MMM.PageData<MMM.System.Vip>>('/a/b/c')
...

一个获取列表的get请求接口，名字为getList，请求地址为/a/b/c。

但是中间的<null, MMM.PageData<MMM.System.Vip>>看不懂了。

下面记录了通过这行代码，学习泛型的过程

泛型语法-尖括号

泛型是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性

typescript 复制代码

function getValue<T>(arg:T):T  {
  return arg;
}

第一个T表示给一个变量类型 命名为T，第二个T表示函数入参arg是T类型，第三个T表示函数返回内容的类型是T，从而达到控制函数入参和函数返回数据是同一类型。

调用

typescript 复制代码

getValue<string>('Kuaizhidao'); // 定义 T 为 string 类型
getValue('Kuaizhidao') // 自动推导类型为 string

泛型语法-逗号

可以定义多个类型变量，使用逗号隔开

其实并不是只能定义一个类型变量，我们可以引入希望定义的任何数量的类型变量。比如我们引入一个新的类型变量 U,typescript 给我们自动推断出输入、返回的类型

typescript 复制代码

function getValue<T, U>(arg:[T,U]):[T,U] {
  return arg;
}

// 使用
const str = getValue(['kuaizhidao', 18]);

定义了两个类型变量------T和U，函数入参是个包含两个数据的数组，里面的数据分别类型是T和U，函数返回值也是个数组，也包含两个数据，两个数据的类型也分别是T和U。

接口、类中使用泛型

直接上示例

typescript 复制代码

interface KeyValue<T,U> {
  key: T;
  value: U;
}

const person1:KeyValue<string,number> = {
  key: '快智岛',
  value: 18
}
const person2:KeyValue<number,string> = {
  key: 20,
  value: '快智岛'
}

typescript 复制代码

class Test<T> {
  value: T;
  add: (x: T, y: T) => T;
}

let myTest = new Test<number>();
myTest.value = 0;
myTest.add = function (x, y) {
  return x + y;
};

分析代码

结合上面的语法，分析<null, MMM.PageData<MMM.System.Vip>>

首先可以肯定，这行代码是在调用函数中使用，传入了具体的类型
第一个类型变量是null，第二个类型变量有两层
1. 第一层是MMM.PageData，通过查看代码，其定义是

typescript 复制代码

type MMM.PageData<T> = {
    current: number;
    size: number;
    total: number;
    records: T[];
}

有当前页、页数、总条数、列表数据

这个类定义了一个类型变量，控制里records数组数据

第二层是MMM.System.Vip

typescript 复制代码

interface Vip {
  	count: Number;
    grade: Number;
    configs: String[];
}

结合a、b，第二个类型定义的是一个列表对象数据，其中records是Vip接口形式的数组

request.get的定义

typescript 复制代码

get<T = any, R = AxiosResponse<T>, D = any>(url: string, config?: AxiosRequestConfig<D>): Promise<R>;

函数有两个入参url和config，函数返回的是一个promise。

再看其中用到的泛型，方法定义了三个类型变量，泛型中的等号表示默认值，T传入了AxiosResponse，D传入到AxiosRequestConfig中，R传入到Promise

结合2中的分析，T=null，R=MMM.PageData<MMM.System.Vip>，D=any

最终为<T = null, R = MMM.PageData<MMM.System.Vip>, D = any>

跳过AxiosRequestConfig（是Axios请求的类型定义）

查看Promise

typescript 复制代码

interface Promise<T> {
    readonly [Symbol.toStringTag]: string;
}

没有用到T呀？？？？

最后查到：

Promise的泛型T代表promise变成成功态之后resolve的值，resolve(value)

这样就能串起来了，get接口，返回一个promise，成功之后，.then回调函数的入参是类型是MMM.PageData<MMM.System.Vip>

PS：绕！太绕了！