长春市建设厅网站个人博客
一、什么是泛型？
泛型，从字面上理解，泛型就是一般的，广泛的的意思。
TypeScript中泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体类型，而是在使用的时候再指定类型的一种特性。
泛型中的 T 就像一个占位符、或者说一个变量，在使用的时候可以把定义的类型像参数一样传入，它可以原封不动地输出。
泛型在成员之间提供有意义的约束，这些成员可以是：函数参数、函数返回值、类的实例成员、类的方法等。
二、使用泛型的好处
- 函数和类可以轻松支持多种类型，增强程序的拓展性
- 不必写冗长的业务代码，增强代码的可拓展性
- 灵活控制类型之间的约束
三、泛型的基本使用
1. 处理函数参数
泛型的语法是尖括号 <> 里写类型参数，一般可以用T来表示。
定义一个 print 函数，这个函数的功能是把传入的参数打印出来，再返回这个参数，传入参数的类型与函数返回类型一致。
function print<T>(arg:T):T {console.log(arg);return arg;
}
这样，我们就做到了输入和输出的类型统一，且可以输入输出任何类型。
泛型的写法对前端工程师来说是有些古怪，比如
<T>，但记住就好，只要一看到<>，就知道这是泛型。
我们在使用的时候可以有两种方式指定类型:
- 定义要使用的类型
- TS 类型推断，自动推导出类型
print<string>('hello') // 定义 T 为 stringprint('hello') // TS 类型推断，自动推导类型为 string
当然也可以结合类型别名type与接口interface使用.
类型别名用来给一个类型起个新名字（它并不是一个类型，只是一个别名而已）。常用于联合类型。
接口来定义对象的类型，除了可用于对类的一部分行为进行抽象以外，也常用于对「对象的形状（Shape）」进行描述。
type 这么写：
type Print = <T>(arg: T) => T
const printFn:Print = function print(arg) {console.log(arg)return arg
}
interface 这么写：
interface Iprint<T> {(arg: T): T
}function print<T>(arg:T) {console.log(arg)return arg
}const myPrint: Iprint<number> = print
2. 默认参数
如果要给泛型加默认参数，可以这么写：
interface Iprint<T = number> {(arg: T): T
}function print<T>(arg:T) {console.log(arg)return arg
}const myPrint: Iprint = print
这样默认就是 number 类型了，怎么样，是不是感觉 T 就如同函数参数一样呢？
3. 处理多个函数参数
现在有这么一个函数，传入一个只有两项的元组，交换元组的第 0 项和第 1 项，返回这个元组。
数组合并了相同类型的对象，而元组（Tuple）合并了不同类型的对象。
let tom: [string, number] = [‘Tom’, 25]; // 定义一对值分别为 string 和 number 的元组
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 项类型的控制。方便编辑器提示。
4. 函数副作用操作
泛型不仅可以很方便地约束函数的参数类型，还可以用在函数执行副作用操作的时候。
比如我们有一个通用的异步请求方法，想根据不同的 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: stringage: number
}function request<T>(url:string): Promise<T> {return fetch(url).then(res => res.json())
}request<UserInfo>('user/info').then(res =>{console.log(res)
})
如果我的文章对你有帮助，你的赞👍就是对我的最大支持_
https://juejin.cn/post/7064351631072526350
https://juejin.cn/post/7193917621069152311