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'));    //调用方法时指定类型
上一篇:Centos7 搭建Nginx+rtmp+hls直播推流服务器


下一篇:html 表单事件