TS泛型在函数、接口、类中使用介绍

一、泛型是什么？有什么作用

当我们定义一个变量不确定类型的时候有两种解决方式：

1、使用any
使用any定义时存在的问题：虽然 以 知道传入值的类型但是无法获取函数返回值的类型；另外也失去了ts类型保护的优势
2、使用泛型
泛型指的是在定义函数/接口/类型时，不预先指定具体的类型，而是在使用的时候在指定类型限制的一种特性。
 

二、使用

1、在函数中使用泛型

function echo<T>(arg:T):T{
    return arg
}
const result=echo(true)


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

const result2=swap(['string',123])
result2[1].charAt(0)

2、在类中使用泛型

事例1

class Animal<T> {
 name:T;
 constructor(name: T){
  this.name = name;
 }
 action<T>(say:T) {
   console.log(say)
 }
}
let cat = new Animal('cat');
cat.action('mimi')

事例2 

class Queue<T>{
    private data:T[]=[];
    push(item:T){
       return this.data.push(item)
    }
    pop(){
        return this.data.shift()
    }
}
const queue=new Queue<number>()
queue.push(1)
console.log(queue.pop()?.toFixed())

const queue2=new Queue<string>()
queue2.push('12')
console.log(queue2.pop()?.length)

3、泛型在接口中使用  

interface KeyPair<T,U>{
    key:T,
    value:U
}
let kp1:KeyPair<number,string>={key:1,value:'string'}
let kp2:KeyPair<string,number>={key:'abc',value:12}
let arrTow:Array<number>=[1,2,4]

4、约束泛型

interface IWithLength{
    length:number
}

function echoWidthLength<T extends IWithLength>(arg:T):T{
    console.log(arg.length)
    return arg
}
//这样子参数就只能传带有length属性的啦
const str=echoWidthLength('str')
const obj=echoWidthLength({length:10,width:10})
const arr=echoWidthLength([1,2,3])