TS — 泛型
最后更新于：2022-04-02 08:11:19
>[success] # 什么是泛型
部分内容摘自:[TS入门教程 ](https://ts.xcatliu.com/advanced/generics.html)
~~~
1.泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的
类型，而在使用的时候再指定类型的一种特性。
2.就是一种不确定的数据类型，可以把运行时的问题提前到编译时期（java
里是这么说的 我觉得在ts 应该同理的）
3.简单粗暴的说不想丢失'ts' 的类型检查
~~~
>[info] ## 举个例子
~~~
1.现在有个方法，这个方法有两个参数，一个参数是用来占位数组的项的占位
参数'value',一个是当前数组长度的'items'
~~~
>[danger] ##### js 中的写法
~~~
1.下面我们又做了一个操作: 我们想将当前传入参数的长度重新返回一个数
组,但是这时候疏忽传入了数字，其实按照js逻辑思想我们会对类型做判断
然后强大我的代码，本质上这种 错误对'前端人员'来说避免是正常操作
~~~
~~~
function getArray(value,items){
return new Array(items).fill(value)
}
getArray(1,1).map((items)=>{
return items.length
})
~~~
* 打印结果
~~~
[undefined]
~~~
>[danger] ##### Ts -- 中如何来写（any）
~~~
1.直接将上面代码转译成ts 写法如下
2.下面的写法是直接按照'ts' 思路简单转译，因为不确定'value' 是什么类型以
及不确定，返回类型这里用了'any'
3.这么做之后和'js'没区别
~~~
~~~
function getArray(value:any,items:number = 5):any[]{
return new Array(items).fill(value)
}
getArray(1,1).map((items)=>{
return items.length
})
~~~
* 打印结果
~~~
[undefined]
~~~
>[danger] ##### Ts -- 中如何来写（联合类型）
~~~
1.然后想到了联合类型写法，返回值是联合类型不就解决了么，你返回的可
能是'string' 也可能是'number' 不就好了么
2.实践后发现，在编写的过程这个联合类型只承认双方共有属性举个下面的
案例说明
~~~
~~~
function getArray(value:any,items:number = 5):(string|number)[]{
return new Array(items).fill(value)
}
getArray("1",1).map((items)=>{
return items.length
})
~~~
* 编写过程帮我们校验了，但是length 不是两个类型共有的
* 能改么 答案是能，但是改了还不如第一种
~~~
// 自信的程序员 我就断言你传入的是 字符
getArray("1",1).map((items)=>{
return (items as string).length
})
~~~
>[danger] ##### Ts -- 中如何来写（函数重载）
~~~
1.按照现阶段的知识储备只能用这个了函数的重载
~~~
~~~
function getArray(value:string,items:number):string[]
function getArray(value:number,items:number):number[]
function getArray(value:any,items:number = 5):(string|number)[]{
return new Array(items).fill(value)
}
getArray("1",1).map((items)=>{
return items.length
})
~~~
* 上面的案例传的是字符串那么我们串数字呢
~~~
1.传数字的话整个代码在我们编写的时候就给提示了真的好棒(我的内心是无
力吐槽)
~~~
>[info] ## 正式使用泛型
~~~
1.上面的案例我们虽然找到了解决方法，但有没有更好的方法来解决呢，别
忘了开篇说的
'泛型是一种不确定的数据类型，可以把运行时的问题提前到编译时期'
~~~
>[danger] #### 泛型的写法
~~~
1.我们在函数名后添加了 ，其中 T 用来指代任意输入的类型，在后面
的输入 value: T 和输出 Array 中即可使用了。
2.'下面案例也可以不用T表示','A,B,C...' 随意
~~~
* 用泛型 --- 也能实心函数重载的效果
~~~
function getArray(value:T,items:number = 5):T[]{
return new Array(items).fill(value)
}
// 缩写 可以将明确的类型省略，编译器会给传参来判断
getArray("1",1).map((items)=>{
return items.length
})
// 不缩写
// getArray("1",1).map((items)=>{
// return items.length
// })
~~~
>[danger] ##### 泛型传入多个不同类型参数
~~~
1.泛型传入多个不同类型参数
~~~
~~~
function getArray(value1:T,value2:U,items:number = 5):Array<[T,U]>{
return new Array(items).fill([value1,value2])
}
getArray("1",1,1).forEach((items)=>{
console.log(items[0].length)
console.log(items[1].length) // 帮我们自动检测数字没有length 属性
})
~~~
>[danger] ##### 函数表达式/函数别名/接口 --配合泛型写法
* 函数表达式的定义方式
~~~
let getArray: (arg: T, times: number) => T[]
getArray = (arg: any, times: number) => {
return new Array(times).fill(arg)
}
getArray(123, 3).map((item) => item.length) // 报错帮你自动检测了
~~~
* 函数别名
~~~js
type GetArray = (arg: T, times: number) => T[]
let getArray: GetArray = (arg: any, times: number) => {
return new Array(times).fill(arg)
}
~~~
* 接口类型
~~~
interface GetArray {
(arg: T, times: number): T[],
array: T[]
}
//泛型和 interface
interface KeyPair {
key: T;
value: U;
}
let kp1: KeyPair = { key: 1, value: "str"}
let kp2: KeyPair = { key: "str", value: 123}
~~~
>[danger] ##### 泛型约束 -- 来约束泛型参数
~~~
1.现在泛型会根据你传入的值还进行动态类型，问题来了有一些不具备我们代码中属性的值传入，会导致编译
阶段报错如图一，这时候需要对泛型传入的参数加以约束，这时候使用泛型约束
2.思路就是让泛型类型去继承接口或者一些类，让在编译过程去检测传入的，泛型约束需要关键字('extends')
泛型是具有当前指定的属性
3.简单的说泛型约束解决在函数内部使用泛型变量的时候，由于事先不知道它是哪种类型，所以不能随意的操
作它的属性或方法
4.有些更详细的案例可以看一下开篇文章的地址
~~~
* 图一
~~~
interface ValueWithLength {
length: number
}
const getArray = (arg: T, times): T[] => {
return new Array(times).fill(arg)
}
getArray([1, 2], 3)
getArray('123', 3)
getArray({
length: 2,
}, 3)
getArray(1, 3) // 报错 数字类型没有length
~~~
>[danger] ##### 泛型约束结合索引类型的使用
~~~
1. 下面的案例 实现的是，泛型参数必须是传入对象key中存在的，这是一个
继承了 keyof 一个属性
~~~
~~~
const getProps = (object: T, propName: K) => {
return object[propName]
}
const objs = {
a: 'a',
b: 'b',
}
getProps(objs, 'a')
~~~
>[danger] ##### 防止思维定式
~~~
function getExcludeProp(obj:T){
return obj
}
// getExcludeProp({name:'w'}) // 报错
getExcludeProp({name:'w',props:'w'})
~~~
>[danger] ##### 泛型和类
~~~
class Queue {
private data = [];
push(item) {
return this.data.push(item)
}
pop() {
return this.data.shift()
}
}
const queue = new Queue()
queue.push(1)
queue.push('str')
console.log(queue.pop().toFixed())
console.log(queue.pop().toFixed())
// 在上述代码中存在一个问题，它允许你向队列中添加任何类型的数据，当然，当数据被弹出
// 队列时，也可以是任意类型。在上面的示例中，看起来人们可以向队列中添加string 类型的数据
// 但是那么在使用的过程中，就会出现我们无法捕捉到的错误，
class Queue {
private data = [];
push(item: T) {
return this.data.push(item)
}
pop(): T {
return this.data.shift()
}
}
const queue = new Queue()
~~~
';