Typescript 泛型、泛型函数、泛型类、泛型接口

泛型

可以支持不特定的数据类型，提高类、接口、方法的复用性。
场景：使用泛型创建可重用的组件，一个组件可以支持多种数据类型的数据，用户可以以自己的数据类型来使用组件

泛型函数

// 只能返回string
function getString(value:string):string{
    
    
    return value
}
console.log(getString('a'));

// 只能返回number
function getNumber(value:number):number{
    
    
    return value
}
console.log(getNumber(1));
// any可以支持返回不同类型，其实是放弃了类型检查，我们想要的效果是返回类型和传入参数类型一致
function getAny(value:any):any{
    
    
    return 'hhh'
}
console.log(getAny('11'));

泛型:T表示泛型，也可以用其他字母，具体什么类型是调用这个方法时决定的

function getData<T>(value:T):T{
    
    
    return value
}

泛型类

写一个求number数组最小值的算法：

class MinValue{
    
    
    list:number[] = []
    constructor(l:number[]){
    
    
        this.list = l
    }
    add(num:number){
    
    
        this.list.push(num)
    }
    min():number{
    
    
        var minNum = this.list[0]
        for(let i=0;i<this.list.length;i++){
    
    
           if(minNum > this.list[i]){
    
    
               minNum = this.list[i]
           } 
        }
        return minNum
    }
}

现在提高要求，这个算法需要同时支持满足返回number和string两种类型，我们用泛型写下。

也可以用any实现，但是性能不如泛型，并且没有类型检查，建议使用泛型。

class MinValue<T>{
    
    
    list:T[] = []
    constructor(l:T[]){
    
    
        this.list = l
    }
    add(num:T):void{
    
    
        this.list.push(num)
    }
    min():T{
    
    
        var minNum = this.list[0]
        for(let i=0;i<this.list.length;i++){
    
    
           if(minNum > this.list[i]){
    
    
               minNum = this.list[i]
           } 
        }
        return minNum
    }
}

var m = new MinValue<number>([7,-1,2,3,4])   //实例了类，并且指定了T为number类型
console.log(m.min());
m.add(12)
console.log(m.list);

var m1 = new MinValue<string>(['b','g','a'])   //实例了类，并且指定了T为string类型
console.log(m1.min());

泛型接口

interface config{
    
    
    <T>(name:T):T;
}
var getName:config = function<T>(name:T):T{
    
    
    return name
}
console.log(getName<string>('lucy'));    //调用方法时指定类型