从一行代码学习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>>

  1. 首先可以肯定,这行代码是在调用函数中使用,传入了具体的类型
  2. 第一个类型变量是null,第二个类型变量有两层
    1. 第一层是MMM.PageData,通过查看代码,其定义是
typescript 复制代码
type MMM.PageData<T> = {
    current: number;
    size: number;
    total: number;
    records: T[];
}

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

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

  1. 第二层是MMM.System.Vip
typescript 复制代码
interface Vip {
  	count: Number;
    grade: Number;
    configs: String[];
}

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

  1. 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:绕!太绕了!

相关推荐
摇滚侠14 分钟前
Spring Boot 3零基础教程,WEB 开发 默认的自动配置,笔记25
前端·spring boot·笔记
Cherry Zack16 分钟前
Vue Router 路由管理完全指南:从入门到精通前言
前端·javascript·vue.js
亮子AI1 小时前
【npm】npm install 产生软件包冲突怎么办?(详细步骤)
前端·npm·node.js
汪汪大队u1 小时前
为什么 filter-policy 仅对 ASBR 的出方向生效,且即使在该生效场景下,被过滤的路由在协议内部(如协议数据库)依然存在,没有被彻底移除?
服务器·前端·网络
慧一居士1 小时前
vue.config.js 文件功能介绍,使用说明,对应完整示例演示
前端·vue.js
颜酱1 小时前
用导游的例子来理解 Visitor 模式,实现AST 转换
前端·javascript·算法
蒙特卡洛的随机游走1 小时前
Spark的宽依赖与窄依赖
大数据·前端·spark
共享家95272 小时前
QT-常用控件(多元素控件)
开发语言·前端·qt
葱头的故事2 小时前
将传给后端的数据转换为以formData的类型传递
开发语言·前端·javascript
_23332 小时前
vue3二次封装element-plus表格,slot透传,动态slot。
前端·vue.js