1.泛型函数：

  1. // 泛型
  2. // any放弃了类型检查   我们应该传入什么，返回什么；  比如：传入number类型就返回number类型，传入string类型就返回string类型；
  4. // any则表示传入的类型参数和返回的可以不一致；
  5. function getValue(value: any): any {
  6.   return value;
  7. }
  8. getValue(345);
  9. getValue("张三");
  11. // 泛型：可以支持不特定的数据类型 传入的类型参数和返回的要一致；
  12. // T表示泛型，具体什么类型是调用这个方法的时候决定的；
  13. function getName<T>(value: T): T {
  14.   return value;
  15. }
  16. getName<number>(111);
  17. getName<number>("111");//错误写法
  18. getName<string>("李四");

image.png

  1. // 错误返回值
  2. function getName2<T>(value: T): T {
  3.   return "1233333";
  4. }
  5. getName2<number>(111);
  6. getName2<string>("李四");
  7. // 正确写法
  8. function getName3<T>(value: T): any {
  9.   return "1233333";
  10. }
  11. getName3<number>(111);
  12. getName3<string>("李四");

image.png

2.泛型类：

通俗理解：泛型就是解决 类、接口、方法的复用，以及对不特定的数据类型的支持（类型校验）

  1. // 泛型类：比如有个最小堆的算法，需要同时支持返回字符串和数字两种类型，可以通过泛型来实现；
  2. class MinNum {
  3.   public list: number[] = [];
  4.   add(num: number) {
  5.     this.list.push(num);
  6.   }
  7.   min(): number {
  8.     let minNum = this.list[0];
  9.     for (let i = 0, len = this.list.length; i < len; i++) {
  10.       if (minNum > this.list[i]) {
  11.         minNum = this.list[i];
  12.       }
  13.     }
  14.     return minNum;
  15.   }
  16. }
  17. let m = new MinNum();
  18. m.add(33);
  19. m.add(36);
  20. m.add(3);
  21. m.add(13);
  22. m.add(98);
  23. alert(m.min());
  25. //例二
  26. class MinNum<T> {
  27.   public list: T[] = [];
  28.   add(num: T): void {
  29.     this.list.push(num);
  30.   }
  31.   min(): T {
  32.     let minNum = this.list[0];
  33.     for (let i = 0, len = this.list.length; i < len; i++) {
  34.       if (minNum > this.list[i]) {
  35.         minNum = this.list[i];
  36.       }
  37.     }
  38.     return minNum;
  39.   }
  40. }
  41. let m1 = new MinNum<number>(); //实例化类，并且制定了类的T代表类型是nuber
  42. m1.add(33);
  43. m1.add(36);
  44. m1.add(3);
  45. m1.add(1);
  46. m1.add(98);
  47. alert(m1.min());
  49. let m2 = new MinNum<string>(); //实例化类，并且制定了类的T代表类型是nuber
  50. m2.add("t");
  51. m2.add("b");
  52. m2.add("f");
  53. m2.add("g");
  54. m2.add("z");
  55. alert(m2.min());//这里用的是ACSII进行大小比较的

3.泛型接口：

  1. //函数类型接口
  2. interface ConfigFn {
  3.   (value1: string, value2: string): string;
  4. }
  5. var setData: ConfigFn = function (name: string, age: string): string {
  6.   return name + ":" + age;
  7. };
  8. alert(setData("name", "张三"));
  10. //第一种写法
  11. interface ConfigFn {
  12.   <T>(value1: T): T;
  13. }
  14. var setData2: ConfigFn = function <T>(name: T): T {
  15.   return name;
  16. };
  17. alert(setData2<string>("name"));
  18. alert(setData2<string>(333));//错误
  20. //第二种写法
  21. interface ConfigFn<T> {
  22.   (value1: T): T;
  23. }
  24. function getData<T>(name: T): T {
  25.   return name;
  26. }
  27. var myData: ConfigFn<number> = getData;
  28. alert(myData(2222));
  29. alert(myData("2222"));//错误