泛型

// 泛型
// 我们还是先来看这样一个例子，体会一下泛型解决的问题吧。

// 定义一个 print 函数，这个函数的功能是把传入的参数打印出来，再返回这个参数，传入参数的类型是 string，函数返回类型为 string。
function prit(arg:string):string{
console.log(arg)
return arg
}

// 现在需求变了，我还需要打印 number 类型，怎么办？

// 可以使用联合类型来改造：

function print(arg:number|string):string|number{
return arg
}

// 现在需求又变了，我还需要打印 string 数组、number 数组，甚至任何类型，怎么办？

// 有个笨方法，支持多少类型就写多少联合类型。

// 或者把参数类型改成 any。

function print3(arg:any):any{
return arg
}

// 且不说写 any 类型不好，毕竟在 TS 中尽量不要写 any。

// 而且这也不是我们想要的结果，只能说传入的值是 any 类型，输出的值是 any 类型，传入和返回并不是统一的。
// 这么写甚至还会出现bug

const res:string=print3(123) //定义 string 类型来接收 print 函数的返回值，返回的是个 number 类型，TS 并不会报错提示我们。

// 这个时候，泛型就出现了，它可以轻松解决输入输出要一致的问题。

// 泛型基本使用
// 处理函数参数
// 泛型的语法是 <> 里写类型参数，一般可以用 T 来表示。

function print4<T>(arg:T):T{
console.log(arg)
return arg
}
// 这样，我们就做到了输入和输出的类型统一，且可以输入输出任何类型。
// 如果类型不统一，就会报错：

const res4:string=print(124)
// 泛型中的 T 就像一个占位符、或者说一个变量，在使用的时候可以把定义的类型像参数一样传入，它可以原封不动地输出。

// type 和 interface 都可以定义函数类型，也用泛型来写一下，type 这么写：
type Print5=<T>(arg:T)=>T
const printFn:Print5=function printss(arg){
return arg
}

// interface 可以这样写
interface Inprint<T>{
(arg:T):T
}

function printsss<T>(arg:T){
return arg
}

const myprint:Inprint<number>=printsss

// 默认参数
interface Inprint<T=number>{
(arg:T):T
}
function printtttt<T>(arg:T){
return arg
}
const myprintttt:Inprint=printtttt //这样默认就是 number 类型了，怎么样，是不是感觉 T 就如同函数参数一样呢？

// 处理多个函数参数
function swap(tuple){ // 这么写，我们就丧失了类型，用泛型来改造一下
return [tuple[1],tuple[0]]
}

function swaper<T,U>(tuple:[T,U]):[U,T]{
return [tuple[1],tuple[0]]
}

const resd=swaper(['we',18])
// resd[0]. //string 方法

// 泛型不仅可以很方便地约束函数的参数类型，还可以用在函数执行副作用操作的时候。
// 比如我们有一个通用的异步请求方法，想根据不同的 url 请求返回不同类型的数据。
function request(url:string){
return fetch(url).then(res=>res.json())
}
// 调一个获取用户信息的接口
request('user/info').then(res=>{ //此时res是一个any类型
console.log(res)
})

// 这时候的返回结果 res 就是一个 any 类型，非常讨厌。
// 我们希望调用 API 都清晰的知道返回类型是什么数据结构，就可以这么做：
interface userInfo{
name:string
age:number
}

function requests<T>(url:string):Promise<T>{
return fetch(url).then(res=>res.json())
}

requests<userInfo>('use/info').then(res=>{
console.log(res.)
})
// 约束泛型
interface Ilength{
length:number
}

function printLength<T extends Ilength>(arg:T):T{
console.log(arg.length)
return arg
}
const str = printLength('123')
const stnumber = printLength([1,2,3,4])
const obj = printLength({length:10})

// 定义一个不包含长度的属性就会报错
// const num = printLength(10)

// 泛型的一些应用
// 使用泛型，可以在定义函数、接口或类的时候，不预先指定具体类型，而是在使用的时候再指定类型
class Stack<T>{
private data:T[]=[]
push(item:T){
return this.data.push(item)
}
pop():T|undefined{
return this.data.pop()
}
}

const s1=new Stack<number>()
s1.push(123)

// 这是非常灵活的，如果需求变了，入栈和出栈都要是 string 类型，在定义实例的时候改一下就好了：
const s2 = new Stack<string>()
s2.push('123')

// 特别注意的是，泛型无法约束类的静态成员。
// 给 pop 方法定义 static 关键字，就报错了
class Stacksss<T>{
private data:T[]=[]
push(item:T){
return this.data.push(item)
}
static pop():T|undefined{ // 报错
return this.data.pop()
}
}
// 泛型约束接口
// 使用泛型，也可以对 interface 进行改造，让 interface 更灵活。
interface Ikeyvalue<T,U>{
key:T
value:U
}
const k1:Ikeyvalue<number,string>={key:123,value:'sdf'}
const k2:Ikeyvalue<string,number>={key:'ddd',value:123}

// 泛型定义数组
// 之前这么写
const arr:number[]=[1,2,4]
// 也可以用泛型定义
const arr1:Array<number>=[1,2,4,5,5]

// 总结：泛型（Generics），从字面上理解，泛型就是一般的，广泛的。
// 泛型是指在定义函数、接口或类的时候，不预先指定具体类型，而是在使用的时候再指定类型。
// 泛型中的 T 就像一个占位符、或者说一个变量，在使用的时候可以把定义的类型像参数一样传入，它可以原封不动地输出。
// 泛型在成员之间提供有意义的约束，这些成员可以是：函数参数、函数返回值、类的实例成员、类的方法等。

作者：前端阿林
链接：https://juejin.cn/post/7068081327857205261
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。