TypeScript基础入门 - 函数 - 重载
转载
TypeScript基础入门 - 函数 - 重载
项目实践仓库
https://github.com/durban89/typescript_demo.git tag: 1.2.5
为了保证后面的学习演示需要安装下ts-node,这样后面的每个操作都能直接运行看到输出的结果。
npm install -D ts-node
后面自己在练习的时候可以这样使用
npx ts-node 脚本路径
函数
重载
JavaScript本身是个动态语言。 JavaScript里函数根据传入不同的参数而返回不同类型的数据是很常见的。如下实例
let suits = ["hearts", "spades", "clubs", "diamonds"]; function pickCard(x: any): any { if (typeof x == "object") { let pickCard = Math.floor(Math.random() * x.length); return pickCard; } else if (typeof x == 'number') { let pickedSuit = Math.floor(x / 13); return { suit: suits[pickedSuit], card: x % 13, } } } let myDeck = [ { suit: "diamands", card: 2, }, { suit: 'spades', card: 10, }, { suit: 'hearts', card: 4 } ] let pickedCard1 = myDeck[pickCard(myDeck)]; let pickedCard2 = pickCard(15); console.log('card: ' + pickedCard1.card + ' of ' + pickedCard1.suit); console.log('card: ' + pickedCard2.card + ' of ' + pickedCard2.suit);
运行后得到类型如下结果
$ npx ts-node src/function_7.ts card: 2 of diamands card: 2 of spades
pickCard方法根据传入参数的不同会返回两种不同的类型。 如果传入的是代表纸牌的对象,函数作用是从中抓一张牌。 如果用户想抓牌,我们告诉他抓到了什么牌。 但是这怎么在类型系统里表示呢。方法是为同一个函数提供多个函数类型定义来进行函数重载。 编译器会根据这个列表去处理函数的调用。 下面我们来重载 pickCard函数。
let suits = ["hearts", "spades", "clubs", "diamonds"]; function pickCard(x: {suit: string, card: number}[]): number; function pickCard(x: number): {suit: string, card: number}; function pickCard(x: any): any { if (typeof x == "object") { let pickedCard = Math.floor(Math.random() * x.length); return pickedCard; } else if (typeof x == 'number') { let pickedSuit = Math.floor(x / 13); return { suit: suits[pickedSuit], card: x % 13, } } } let myDeck = [ { suit: "diamands", card: 2, }, { suit: 'spades', card: 10, }, { suit: 'hearts', card: 4 } ] let pickedCard1 = myDeck[pickCard(myDeck)]; let pickedCard2 = pickCard(15); console.log('card: ' + pickedCard1.card + ' of ' + pickedCard1.suit); console.log('card: ' + pickedCard2.card + ' of ' + pickedCard2.suit);
得到的结果类似如下
$ npx ts-node src/function_7.ts card: 10 of spades card: 2 of spades
这样改变后,重载的pickCard函数在调用的时候会进行正确的类型检查。
为了让编译器能够选择正确的检查类型,它与JavaScript里的处理流程相似。 它查找重载列表,尝试使用第一个重载定义。 如果匹配的话就使用这个。 因此,在定义重载的时候,一定要把最精确的定义放在最前面。
注意,function pickCard(x: any): any并不是重载列表的一部分,因此这里只有两个重载:一个是接收对象另一个接收数字。 以其它参数调用 pickCard会产生错误。
本实例结束实践项目地址
https://github.com/durban89/typescript_demo.git tag: 1.2.6
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
(一)Java工程化--Maven基础
Maven 读作['mevən] 翻译成中文是"内行,专家" Maven是什么 包依赖的前世今生: 原始的jar包引用--> ant --> maven. 是一种项目管理工具 Maven优势: convertion over configuration 约定优于配置: 这个原则不仅适用于maven, 更是目前大多数框架遵循的原则,如mvc 简单 易于测试 构建简单 CI(持续集成) 插件丰富 下载和安装 下载: http://maven.apache.org/download.cgi 安装: 解压安装即可 环境变量配置: windows: 配置path MAVEN_HOME linux: 在 .bash_profile 文件中 运行参数: 定义环境变量MAVEN_OPS 配置settings.xml: settings.xml文件是个空模板,我们可以在这个文件进行一些自定义配置. 常用的配置如:repo存储目录 创建maven项目 项目结构: 遵循约定优于配置原则, 项目包的组织结构如下 pom.xml groupId 公司组织id artifactId 功能命名 vers...
- 下一篇
JavaScript第一讲之认识js案例
本课程学习,采用的是软件是Hbuilder和(谷歌)浏览器 Hbuilder 分享的地址:链接:https://pan.baidu.com/s/1SvF5GCeVmMClh0vrbQE55w 密码:0b5c Hbuilder 的界面如下:选择【暂不登录】即可进入主界面: 主界面: 好了,接下来,闲话不多叙,直接进入今天的案例主题: 利用JavaScript技术在网页中出现弹框: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript零基础学习第一讲</title...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Red5直播服务器,属于Java语言的直播服务器
- CentOS6,CentOS7官方镜像安装Oracle11G
- CentOS关闭SELinux安全模块
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS7编译安装Gcc9.2.0,解决mysql等软件编译问题
- SpringBoot2整合Thymeleaf,官方推荐html解决方案
- CentOS7安装Docker,走上虚拟化容器引擎之路
- CentOS7,CentOS8安装Elasticsearch6.8.6
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- CentOS7设置SWAP分区,小内存服务器的救世主