前言
首先看一下本文的知识图谱
为什么需要泛型
我个人认为它不仅能支持当前的数据类型，同时也能支持未来的数据类型。针对于前后端同时也有一个明确的规范
我们先来举一个例子，体会一下泛型解决的问题
1:定义一个 print 函数，这个函数的功能是把传入的参数打印出来，再返回这个参数，传入参数的类型是 string，函数返回类型为 string
function print(arg:string){} 2:接下来还要支持number ,使用联合类型
function print(ary:string|number){}
3:那我们有多少类型支持多少呢？？ function print(ary:any){}
且不说写 any 类型不好，毕竟在 TS 中尽量不要写 any。
而且这也不是我们想要的结果，只能说传入的值是 any 类型，输出的值是 any 类型，传入和返回并不是统一的。
这么写甚至还会出现bug
const res:string = print(123)
复制代码
定义 string 类型来接收 print 函数的返回值，返回的是个 number 类型，TS 并不会报错提示我们
这个时候，泛型就出现了，它可以轻松解决输入输出要一致的问题。
注意：泛型不是为了解决这一个问题设计出来的，泛型还解决了很多其他问题，这里是通过这个例子来引出泛型。
泛型的基本使用
我们使用泛型解决上文问题（泛型的语法<>里写类型参数），一般可用T来表示
function print(arg:T):T{console.log('t')v,returen arg}
如果类型不统一 的话，也会报错 eg:const res:string=print(123) 泛型中的 T 就像一个占位符、或者说一个变量，在使用的时候可以把定义的类型像参数一样传入，它可 以原封不动地输
这里使用的时候可以有两种指定类型
1：定义要使用的类型
2：TS类型推荐，自动导出类型
print('hello') //定义T为string类型 print('hello') //TS 类型推荐，自动推导类型为string
我们知道type 和interface都可以定义函数类型，也用泛型来写一下，type这么写 type Print=(arg:T)=>T const printFn:print=function print(arg){console.log(arg) return arg}
interface 这么写
interface Iprint{ (arg:T):T } function print(arg:T){console.log(arg) return arg} cosnt myPrint:Iprint=print
默认参数
如果要给泛型加默认参数，可以这么写
inrterface Ipriny<T =number> {(arg:T):T} function print(arg:T) { console.log(arg) return arg } const myPrint: Iprint = print
处理多个函数参数
现在有这么一个函数，传入一个只有两项的元组，交换元组的第 0 项和第 1 项，返回这个元组。
function swap(tuple) { return [tuple[1], tuple[0]] }
这么写，我们就丧失了类型，用泛型来改造一下。
我们用 T 代表第 0 项的类型，用 U 代表第 1 项的类型。
function swap<T, U>(tuple: [T, U]): [U, T]{
return [tuple[1], tuple[0]]
}
复制代码
这样就可以实现了元组第 0 项和第 1 项类型的控制
函数副作用操作
泛型不仅可以很方便地约束函数的参数类型，还可以用在函数执行副作用操作的时候。
比如我们有一个通用的异步请求方法，想根据不同的 url 请求返回不同类型的数据。
function request(url:string) {
return fetch(url).then(res => res.json())
}
复制代码
调一个获取用户信息的接口：
request('user/info').then(res =>{
console.log(res)
})
复制代码
这时候的返回结果 res 就是一个 any 类型，非常讨厌。
我们希望调用 API 都清晰的知道返回类型是什么数据结构，就可以这么做：
interface UserInfo {
name: string
age: number
}
function request<T>(url:string): Promise<T> {
return fetch(url).then(res => res.json())
}
request<UserInfo>('user/info').then(res =>{
console.log(res)
})
复制代码
这样就能很舒服地拿到接口返回的数据类型，开发效率大大提高：
约束泛型
假设现在有这么一个函数，打印传入参数的长度，我们这么写：
function printLength<T>(arg: T): T {
console.log(arg.length)
return arg
}
复制代码
因为不确定 T 是否有 length 属性，会报错：
那么现在我想约束这个泛型，一定要有 length 属性，怎么办？
可以和 interface 结合，来约束类型。
interface ILength {
length: number
}
function printLength<T extends ILength>(arg: T): T {
console.log(arg.length)
return arg
}
复制代码
这其中的关键就是 <T extends ILength>，让这个泛型继承接口 ILength，这样就能约束泛型。
我们定义的变量一定要有 length 属性，比如下面的 str、arr 和 obj，才可以通过 TS 编译。
const str = printLength('lin')
const arr = printLength([1,2,3])
const obj = printLength({ length: 10 })
复制代码
这个例子也再次印证了 interface 的 duck typing。
只要你有 length 属性，都符合约束，那就不管你是 str，arr 还是obj，都没问题。
当然，我们定义一个不包含 length 属性的变量，比如数字，就会报错：
泛型的一些应用
使用泛型，可以在定义函数、接口或类的时候，不预先指定具体类型，而是在使用的时候再指定类型。
泛型约束类
定义一个栈，有入栈和出栈两个方法，如果想入栈和出栈的元素类型统一，就可以这么写：
class Stack<T> {
private data: T[] = []
push(item:T) {
return this.data.push(item)
}
pop():T | undefined {
return this.data.pop()
}
}
复制代码
在定义实例的时候写类型，比如，入栈和出栈都要是 number 类型，就这么写：
const s1 = new Stack<number>()
复制代码
这样，入栈一个字符串就会报错：
这是非常灵活的，如果需求变了，入栈和出栈都要是 string 类型，在定义实例的时候改一下就好了：
const s1 = new Stack<string>()
复制代码
这样，入栈一个数字就会报错：
特别注意的是，泛型无法约束类的静态成员。
给 pop 方法定义 static 关键字，就报错了
泛型约束接口
使用泛型，也可以对 interface 进行改造，让 interface 更灵活。
interface IKeyValue<T, U> {
key: T
value: U
}
const k1:IKeyValue<number, string> = { key: 18, value: 'lin'}
const k2:IKeyValue<string, number> = { key: 'lin', value: 18}
复制代码
泛型定义数组
定义一个数组，我们之前是这么写的：
const arr: number[] = [1,2,3]
复制代码
现在这么写也可以：
const arr: Array<number> = [1,2,3]
复制代码
数组项写错类型，报错
实战，泛型约束后端接口参数类型
我们来看一个泛型非常有助于项目开发的用法，约束后端接口参数类型。
import axios from 'axios'
interface API {
'/book/detail': {
id: number,
},
'/book/comment': {
id: number
comment: string
}
...
}
function request<T extends keyof API>(url: T, obj: API[T]) {
return axios.post(url, obj)
}
request('/book/comment', {
id: 1,
comment: '非常棒！'
})
复制代码
这样在调用接口的时候就会有提醒，比如：
路径写错了：
参数类型传错了：
参数传少了：
开发效率大大提高啊！可以早点和后端联调完，摸鱼去了。
