zoukankan      html  css  js  c++  java
  • typescript中的泛型

    泛型:软件工程中,我们不仅要创建一致的定义良好的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;
        }

    使用泛型后就可以解决这个问题

    // T表示泛型,具体什么类型是调用这个方法的时候决定的
    
        function getData<T>(value:T):T{
            return value;
        }
         getData<number>(123);
    
         getData<string>('1214231');

    泛型类

    //普通的类
    class MinClass{ public arr:number[]
    =[]; add(value:number){ this.arr.push(value); } min():number{ var minNumber=this.arr[0]; for(let i=0;i<this.arr.length;i++){ if(minNumber>this.arr[i]){ minNumber=this.arr[i] } } return minNumber; } } var m=new MinClass(); m.add(12); m.add(23); m.add(5); alert(m.min());//显示5 //上面的有个问题就是你传入的值只能是number类型,返回的也是number,如果传入字符创就会报错,解决办法:泛型类 //定义泛型类 class MinClassT<T>{ public arr:T[]=[]; add(value:T){ this.arr.push(value); } min():T{ var minNumber=this.arr[0]; for(let i=0;i<this.arr.length;i++){ if(minNumber>this.arr[i]){ minNumber=this.arr[i] } } return minNumber; } } var m1=new MinClassT<number>(); m1.add(15); m1.add(16); m1.add(7); alert(m1.min()); var m2=new MinClassT<string>(); m2.add('a'); m2.add('b'); m2.add('c'); alert(m2.min());

    泛型接口:

     interface ConfigFn{
    
               <T>(value:T):T;
       }
    
    
           var getData:ConfigFn=function<T>(value:T):T{
    
               return value;
           }
    
    
             getData<string>('张三');
    
    
              getData<string>(1243);  //错误

    还有一种写法:

    interface ConfigFn<T>{
                (value:T):T;
            }
    
    
            function getData<T>(value:T):T{
    
                return value;
            }
    
            
            var myGetData:ConfigFn<string>=getData;     
    
    
            myGetData('20');  /*正确*/
    
    
            // myGetData(20)  //错误
  • 相关阅读:
    生活不仅有诗远方,还有身体和枸杞
    星空
    住进布达拉宫,我是雪域最大的王。流浪在拉萨街头,我是世间最美的情郎。
    安得与君相决绝,免教生死作相思
    黑马程序员-传智健康项目资料
    黑马程序员-传智健康项目(第十三章)
    黑马程序员-传智健康项目(第十二章)
    黑马程序员-传智健康项目(第十一章)
    黑马程序员-传智健康项目(第十章)
    黑马程序员-传智健康项目(第九章)
  • 原文地址:https://www.cnblogs.com/longailong/p/10608913.html
Copyright © 2011-2022 走看看