Typescript的泛型

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

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

泛型函数:

  1. // 指定返回值类型和传入的参数类型一致
  2. function getData<T>(value:T):T{
  3. return value;
  4. }
  5. // 仅指定传入的参数类型,返回any
  6. function getData<T>(value:T):any{
  7. return 'abc';
  8. }
  9. // 调用
  10. getData<number>(123);
  11. getData<string>('abc');

泛型类:

  1. class MinClass<T> {
  2. public list:T[] = [];
  3. add(value:T):void{
  4. this.list.push(value);
  5. }
  6. min():T{
  7. var minValue = this.list[0];
  8. for(var i=0; i<this.list.length; i++) {
  9. if(minValue > this.list[i]) {
  10. minValue = this.list[i];
  11. }
  12. }
  13. return minValue;
  14. }
  15. }
  16. var m1 = new MinClass<number>();
  17. m1.add(2);
  18. m1.add(1);
  19. m1.add(5);
  20. alert(m1.min());
  21. var m2 = new MinClass<string>();
  22. m2.add('c');
  23. m2.add('e');
  24. m2.add('b');
  25. m2.add('g');
  26. alert(m2.min());

泛型接口定义1:

  1. interface ConfigFn {
  2. <T>(value:T):T;
  3. }
  4. var getData:ConfigFn=function<T>(value:T):T {
  5. return value;
  6. }
  7. alert(getData<string>('张三'));
  8. alert(getData<number>(123));

泛型接口定义2:

  1. interface ConfigFn<T> {
  2. (value:T):T;
  3. }
  4. function getData<T>(value:T):T{
  5. return value;
  6. }
  7. var myGetData:ConfigFn<string>=getData;
  8. alert(getData<string>('张三'));
  9. alert(getData<number>(123));

泛型类的应用:

  1. class User {
  2. userName:string | undefined;
  3. password:string | undefined;
  4. }
  5. class ArticelCate {
  6. title:string | undefined;
  7. describe:string | undefined;
  8. status:number | undefined;
  9. constructor(parames:{title:string, describe:string, status?:number}) {
  10. this.title = parames.title;
  11. this.describe = parames.describe;
  12. this.status = parames.status;
  13. }
  14. }
  15. class MySqlDB<T> {
  16. add(info:T):boolean {
  17. console.log(info);
  18. return true;
  19. }
  20. }
  21. var u = new User();
  22. u.userName = '张三';
  23. u.password = '123456';
  24. var db = new MySqlDB<User>();
  25. db.add(u);
  26. var a = new ArticelCate({title:'新闻', describe:'测试头条新闻'});
  27. var db2 = new MySqlDB<ArticelCate>();
  28. db2.add(a);