TypeScript中的泛型简单介绍

typeScript中的泛型

  1. 泛型的定义
  2. 泛型函数
  3. 泛型类
  4. 泛型接口

泛型:软件工程中,我们不仅要创建一致的定义良好的API,同时也要考虑可重用性。 组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型,这在创建大型系统时为你提供了十分灵活的功能。

在像C#和Java这样的语言中,可以使用泛型来创建可重用的组件,一个组件可以支持多种类型的数据。 这样用户就可以以自己的数据类型来使用组件。

通俗理解:泛型就是解决 类 接口 方法的复用性、以及对不特定数据类型的支持(类型校验)

//只能返回string类型的数据

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

//同时返回 string类型 和number类型  (代码冗余)


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


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




//同时返回 string类型 和number类型       any可以解决这个问题


      function getData(value:any):any{
         return '哈哈哈';
     }
     getData(123);

     getData('str');


    

//any放弃了类型检查,传入什么 返回什么。比如:传入number 类型必须返回number类型  传入 string类型必须返回string类型


    传入的参数类型和返回的参数类型可以不一致
       function getData(value:any):any{
            return '哈哈哈';
        }


// 泛型:可以支持不特定的数据类型   要求:传入的参数和返回的参数一直



// T表示泛型,具体什么类型是调用这个方法的时候决定的

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

         getData<string>('1214231');


        getData<number>('2112');       /*错误的写法*/  



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

        getData<number>(123);  //参数必须是number

       getData<string>('这是一个泛型');

泛型类:比如有个最小堆算法,需要同时支持返回数字和字符串 a - z两种类型。 通过类的泛型来实现

  `

            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(3);
            m.add(22);
            m.add(23);
            m.add(6);

            m.add(7);
            alert(m.min());

类的泛型

class MinClas<T>{

    public list:T[]=[];

    add(value:T):void{

        this.list.push(value);
    }

    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 m1=new MinClas<number>();   /*实例化类 并且制定了类的T代表的类型是number*/
m1.add(11);
m1.add(3);
m1.add(2);
alert(m1.min())


var m2=new MinClas<string>();   /*实例化类 并且制定了类的T代表的类型是string*/

m2.add('c');
m2.add('a');
m2.add('v');
alert(m2.min())

函数类型接口

        interface ConfigFn{

            (value1:string,value2:string):string;
        }


        var setData:ConfigFn=function(value1:string,value2:string):string{


            return value1+value2;
        }


        setData('name','张三');

1、泛型接口

         interface ConfigFn{

             <T>(value:T):T;
        }


         var getData:ConfigFn=function<T>(value:T):T{

            return value;
         }


         getData<string>('张三');


         getData<string>(1243);  //错误

2、泛型接口

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


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

            return value;
        }

        
        var myGetData:ConfigFn<string>=getData;     


        myGetData('20');  /*正确*/


        // myGetData(20)  //错误
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值