中文网:https://www.tslang.cn/

官网:http://www.typescriptlang.org/

目录:

  • Typescript 学习笔记一:介绍、安装、编译
  • Typescript 学习笔记二:数据类型
  • Typescript 学习笔记三:函数
  • Typescript 学习笔记四:回忆Es5 中的类
  • Typescript 学习笔记五:类
  • Typescript 学习笔记六:接口
  • Typescript 学习笔记七:泛型

泛型的定义

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

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

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

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

只能返回string类型的数据,要求能同时返回 string 类型和 number 类型

function getData1 (val:string):string {return val;
}
function getData2 (val:number):number {return val;
}

代码冗余,any 类型可以解决这个问题。

function getData (val:any):any {return val;
}
getData(124);
getData('124');

但是 any 相当于放弃了类型检查。没法实现传入什么,返回什么。比如:传入 number 类型必须返回 number 类型,传入 string 类型必须返回 string 类型。

function getData (val:any):any {return val + '---';
}
getData(124); // 传入 number,返回 string

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

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

泛型函数

function getData<T> (val:T):T {return val;
}
getData<number>(124);
getData<string>('abc');
// getData<number>('abc'); // 错误

放回值可以是任意类型

function getData<T> (val:T):any {return val + '***';
}
getData<number>(124); // 参数必须是数字
getData<string>('abc');

泛型类

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

class minClass {list:number[] = [];add (val:number):void {this.list.push(val);}min ():number {let minNum:number = this.list[0];for(let i = 0; i < this.list.length; i++) {if(minNum > this.list[i]){minNum = this.list[i];}}return minNum;}
}
let m = new minClass();
m.add(3);
m.add(2);
m.add(23);
console.log(m.min()); // 2

正常的类只能实现一种类型。用泛型解决,支持 number 和 string。

class minClass<T> {list:T[] = [];add (val:T):void {this.list.push(val);}min ():T {let minNum = this.list[0];for(let i = 0; i < this.list.length; i++) {if(minNum > this.list[i]){minNum = this.list[i];}}return minNum;}
}
let m1 = new minClass<number>(); // 实例化类,并且指定了类的 T 代表的类型是 number
m1.add(3);
m1.add(2);
m1.add(23);
console.log(m1.min()); // 2let m2 = new minClass<string>(); // 实例化类,并且指定了类的 T 代表的类型是 string
m2.add('a');
m2.add('d');
m2.add('f');
console.log(m2.min()); // a

泛型接口

函数类型接口

interface configFn {(val1:string, val2:string):string;
}
let setData:configFn = function (value1:string, value2:string):string { // 参数名可以和接口中的不一致,但是参数类型必须一致return value1 + value2;
}
setData('1', '2');

泛型接口实现方式1:

interface configFn {<T>(val:T):T;
}
let getData:configFn = function<T> (value:T):T {return value;
}
getData<string>('abc');
getData<number>(123);

泛型接口实现方式2:

interface configFn<T> {(val:T):T;
}
let getData:configFn<string> = function<T> (value:T):T {return value;
}
getData('abc');
getData(123); // 错误

这是最后一篇,之后更深入的学习和应用了,再继续。^_^

转载于:https://www.cnblogs.com/EnSnail/p/10203515.html

Typescript 学习笔记七:泛型相关推荐

  1. Typescript 学习笔记一:介绍、安装、编译

    前言 整理了一下 Typescript 的学习笔记,方便后期遗忘某个知识点的时候,快速回忆. 为了避免凌乱,用 gitbook 结合 marketdown 整理的. github地址是:ts-gitb ...

  2. TypeScript学习笔记3:运算符

    TS 和 JS 相对比的优势 TypeScript的安装步骤.运行问题及代码的简单运行 TypeScript学习笔记1:变量赋值及书写方式 TypeScript学习笔记2:数据类型 文章目录 运算符 ...

  3. TypeScript学习笔记2:数据类型

    TS 和 JS 相对比的优势 TypeScript的安装步骤.运行问题及代码的简单运行 TypeScript学习笔记1:变量赋值及书写方式 TypeScript学习笔记2:数据类型 文章目录 数据类型 ...

  4. TypeScript学习笔记1:变量赋值及书写方式

    TS 和 JS 相对比的优势 TypeScript的安装步骤.运行问题及代码的简单运行 TypeScript学习笔记1:变量赋值及书写方式 TypeScript学习笔记2:数据类型 文章目录 变量赋值 ...

  5. 吴恩达《机器学习》学习笔记七——逻辑回归(二分类)代码

    吴恩达<机器学习>学习笔记七--逻辑回归(二分类)代码 一.无正则项的逻辑回归 1.问题描述 2.导入模块 3.准备数据 4.假设函数 5.代价函数 6.梯度下降 7.拟合参数 8.用训练 ...

  6. websocket 获取连接id_Swoole学习笔记七:搭建WebSocket长连接 之 使用 USER_ID 作为身份凭证...

    Swoole学习笔记七:搭建WebSocket长连接 之 使用 USER_ID 作为身份凭证 2年前 阅读 3678 评论 0 喜欢 0 ### 0.前言 前面基本的WebSocket操作,我们基本都 ...

  7. ROS学习笔记七:使用rqt_console和roslaunch

    ROS学习笔记七:使用rqt_console和roslaunch 本节主要介绍在调试时使用的rqt_console和rqt_logger_level,以及一次性打开多个节点的工具roslaunch. ...

  8. 【K210】K210学习笔记七——使用K210拍摄照片并在MaixHub上进行训练

    [K210]K210学习笔记七--使用K210拍摄照片并在MaixHub上进行训练 前言 K210准备工作 K210如何拍摄照片 准备工作 拍摄相关代码定义 用K210拍摄到的照片在MaixHub平台 ...

  9. Learning ROS for Robotics Programming Second Edition学习笔记(七) indigo PCL xtion pro live

    中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS forRobotics Pro ...

最新文章

  1. postbody传参_post传参params与body的区别(@RequestParam和@RequestBody的区别)
  2. 把java文件打包成.jar (jar命令详解)
  3. C++知识点45——类继承中的类型转换与访问权限控制(上)
  4. 【转载】Linux系统挂载NTFS文件系统
  5. 使用jquery脚本获取随笔、文章和评论的统计数,自定义显示位置
  6. Speedment 3.0的新功能
  7. 每天一个知识点:Python列表两个冒号加一个负数的表达方法
  8. HDOJ--2089--不要62
  9. 23种设计模式的意图和适用范围
  10. 计算机添加pdf打印机驱动,win10系统添加pdf打印机的解决方案
  11. 小程序中getUserProfile使用async和await时fail,提示:can only be invoked by user TAP gesture
  12. RIP和IGRP实验
  13. solidworks2014方程式添加全局变量存在句法错误的解决方案
  14. Altium Designer 相同模块的布局布线操作
  15. java -Djava.ext.dirs= -jar 启动项目,产生的问题
  16. 修改global.func.php,DZ论坛核心代码分析-核心文件global.func.php篇
  17. Python爬取网站数据并存入数据库(简单易懂)
  18. 光伏多峰最大功率点跟踪MPPT MATLAB/Simulink仿真模型
  19. 台式计算机质量检测标准,电脑机箱及整机外观检验标准.pdf
  20. 新手自主创业需要注意哪些误区

热门文章

  1. CentOS7.X中使用yum安装nginx完全教程
  2. helm部署postgresql
  3. linux创建crontab定时任务
  4. Python Django根据数据库表生成模型类的命令
  5. Linux reboot指令
  6. MySQL数据库创建及删除操作
  7. mybatis完整增删改查入门实例
  8. 使用pil读取gif图有些位置为黑色_使用 Pillow 快速创建 GIF 动图
  9. python实现http请求并发_Python使用grequests并发发送请求
  10. docker安装的环境