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;
 }

同时返回 string类型 和number类型 any可以解决这个问题(但是放弃了语法检测,传入什么就返回什么,这么做跟没写的区别一样)

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

泛型:可以支持不特定的数据类型 要求:传入的参数和返回的参数一直
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 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 Config{
  (value:string,data:string):string;
}
var setData:Config = funciton (value1:string,value2:string):string{
  return value1 + value2;
}
setData('name', '张三')

从上面代码中我们无法实现返回值同时为number和string类型 ,接下来通过泛型接口来改造上面代码实现。

1.
interface Config{
  <T>(data:T):T;
}
var getData:Config = function<T>(value:T):T{
  return value;
}
getData<string>('张三')
getData<string>(123)    // 错误写法。传入类型跟指定类型不否
2.
interface Config<T>{
  (value:T):T;
}
function getData<T>(value:T):T{
  return value;
}
var myGetData:Config<string> = getData;
myGetData('10');
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容