>[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>，其中 T 用来指代任意输入的类型，在后面 的输入 value: T 和输出 Array<T> 中即可使用了。 2.'下面案例也可以不用T表示','A,B,C...' 随意 ~~~ * 用泛型 --- 也能实心函数重载的效果 ~~~ function getArray<T>(value:T,items:number = 5):T[]{ return new Array(items).fill(value) } // 缩写 可以将明确的类型省略，编译器会给传参来判断 getArray("1",1).map((items)=>{ return items.length }) // 不缩写 // getArray<string>("1",1).map((items)=>{ // return items.length // }) ~~~ >[danger] ##### 泛型传入多个不同类型参数 ~~~ 1.泛型传入多个不同类型参数 ~~~ ~~~ function getArray<T,U>(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: <T>(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 = <T>(arg: T, times: number) => T[] let getArray: GetArray = (arg: any, times: number) => { return new Array(times).fill(arg) } ~~~ * 接口类型 ~~~ interface GetArray<T> { (arg: T, times: number): T[], array: T[] } //泛型和 interface interface KeyPair<T, U> { key: T; value: U; } let kp1: KeyPair<number, string> = { key: 1, value: "str"} let kp2: KeyPair<string, number> = { key: "str", value: 123} ~~~ >[danger] ##### 泛型约束 -- 来约束泛型参数 ~~~ 1.现在泛型会根据你传入的值还进行动态类型，问题来了有一些不具备我们代码中属性的值传入，会导致编译 阶段报错如图一，这时候需要对泛型传入的参数加以约束，这时候使用泛型约束 2.思路就是让泛型类型去继承接口或者一些类，让在编译过程去检测传入的，泛型约束需要关键字('extends') 泛型是具有当前指定的属性 3.简单的说泛型约束解决在函数内部使用泛型变量的时候，由于事先不知道它是哪种类型，所以不能随意的操 作它的属性或方法 4.有些更详细的案例可以看一下开篇文章的地址 ~~~ * 图一  ~~~ interface ValueWithLength { length: number } const getArray = <T extends ValueWithLength>(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 = <T, K extends keyof T>(object: T, propName: K) => { return object[propName] } const objs = { a: 'a', b: 'b', } getProps(objs, 'a') ~~~ >[danger] ##### 防止思维定式 ~~~ function getExcludeProp<T extends {props:string}>(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<T> { private data = []; push(item: T) { return this.data.push(item) } pop(): T { return this.data.shift() } } const queue = new Queue<number>() ~~~