TypeScript--泛型

最新推荐文章于 2024-01-05 19:01:16 发布

转载最新推荐文章于 2024-01-05 19:01:16 发布 · 180 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000018186226

文章标签：

#javascript #ViewUI

本文探讨了泛型在TypeScript中的使用，包括如何利用泛型声明方法以支持多种类型，通过实例展示了泛型在获取数组最小值、定义泛型类及泛型接口的应用，实现了代码的复用性和灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

泛型

声明一个方法，同时返回string,number类型

问题

function getData1(value:string):string{
    return value;
}
function getData2(value:number):number{
    return value;
}

console.log(getData1('aa'));
console.log(getData2(11));

利用any来解决,但是放弃了类型教验

function getData(value:any):any{
    return value;
}

console.log(getData('aa'));
console.log(getData(11));

利用泛型

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

console.log(getData<number>(123));
console.log(getData<string>('aaa'));

获取数组最小值

未使用泛型

要同时实现string,number,要写2个类来实现

number

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


var m = new MinClass();
m.add(1);
m.add(6);
m.add(2);
m.add(11);
console.log(m.min());

string

class MinClass{
    public list:string[]=[];
    add(num:string){
        this.list.push(num);
    }
    min():string{
        var minNum = this.list[0];
        for(var i =0;i<this.list.length;i++){
            if(minNum > this.list[i]){
                minNum = this.list[i]
            }
        }
        return minNum;
    }
}


var m = new MinClass();
m.add('a');
m.add('c');
m.add('b');
console.log(m.min());

泛型

一个类，同时实现string,number

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


var m = new MinClass<number>();
m.add(1);
m.add(6);
m.add(2);
m.add(11);
console.log(m.min());


var s = new MinClass<string>();
s.add('a');
s.add('b');
s.add('f');
s.add('d');
console.log(s.min());

泛型接口

未使用泛型

interface ConfigFn{
    (value1:string,value2:string):string;
}

var setData:ConfigFn = function(value1:string,value2:string):string{
    return value1+value2;
}
console.log(setData('name','list'));

使用泛型

interface ConfigFn{
    <T>(value:T):T;
}

var setData:ConfigFn= function<T>(value:T):T{
    return value;
}
console.log(setData<string>('aa'));
console.log(setData<number>(123));