5.TypeScript完全解读-函数

新建function.ts。然后在index.ts内引用

给函数定义参数类型:上面是es5的写法 下面是ts6的写法

一个完整的函数类型。括号 箭头 number

现在给add赋值一个函数

如果参数传的是string那么就会报错了,类型不兼容

全局定义的arg3是不需要定义在函数里的

接口定义函数类型,讲接口的时候已经学习过了这里再来看一下

tslint推荐我们使用类型别名,一保存文件就变成了这种形式

也可以这么去定义,此时isString类型就等同于string类型

指定了AddFunce是add 这个类型,然后就可以给他赋值一个函数

函数的参数

首先是可选参数

这种形式是类型别名的形式

参数是可选的,只要在参数后面加一个问号就可以了。在js中可选参数是可以在任何地方的,只要用undefined占位就可以了

ts中可选参数必须在必选参数后面才可以

加上第三个参数的情况

默认参数

在浏览器中用es5的写法写一个函数,默认参数的形式

第二参数传0或者undefined的结果都是2

参数等于一个值,这是在es6中的语法,es6中没有类型

在ts中的默认参数,ts中有类型,就可以这么写,给y设置的默认值是3

默认值可以省略y的类型,ts会根据我们后面设置的3来判断这是个什么类型的参数

如果这里传字符串就会报错,ts已经推算出来y是number类型的

剩余参数

函数可以有任意多的参数

在es6之前的写法

arguments是一个类数组对象,handleData这里我们不写参数,在方法里面用arguments.lenth来判断参数的数量

array.join(',')数组有这个join方法,但是arguments是一个类数组它没有,所以我们需要用一个巧妙的方式来转换一下

Array.prototype.slice.apply(arguments)。 这样arguments就会转换成一个数组

多个参数返回拼接的结果以下划线拼接

es6出现之后,...三个点的操作符

...args可以去拆解一些数组和对象

...就是把数组拆开了放到arr2里面了。

还可以支持对象

obj2也拥有ob1里面所有的属性

在ts中

制定...args来接收后面所有的参数,它是一个数组,所以执行参数类型就是number[]

重载

这两个就是函数重载

第三个定义实际的函数

这里我们调用传入字符串

传入字符串和数值,两种不同的返回结果

这就是函数的重载。根据我们传入的不同的函数的类型和个数参数,返回不同类型

传入字符串,返回的是字符串的数组,再循环这个数组,直接调用toFixed方法就会报错了。因为参数是字符串类型的,不是数字

传入的123是数值类型,这里调用length也是不对的,只有字符串或者子数组才有length这个属性

以上就是函数重载。

前两个是函数重载。

第三个是函数实体,它不是重载的一部分

函数重载只能使用function来定义

结束

TypeScript完全解读(26课时)_5.TypeScript完全解读-函数的更多相关文章

  1. TypeScript完全解读(26课时)_12.TypeScript完全解读-高级类型(1)

    12.TypeScript完全解读-高级类型(1) 高级类型中文网的地址:https://typescript.bootcss.com/advanced-types.html 创建新的测试文件 ind ...

  2. TypeScript完全解读(26课时)_1.TypeScript完全解读-开发环境搭建

    1.TypeScript完全解读-开发环境搭建 初始化项目 手动创建文件夹 D:\MyDemos\tsDemo\client-demo 用VSCode打开 npm init:初始化项目 然后我们的项目 ...

  3. TypeScript完全解读(26课时)_2.TypeScript完全解读-基础类型

    2.TypeScript完全解读-基础类型 src下新建example文件夹并新建文件.basic-type.ts.截图中单词拼错了.后需注意一下是basic-type.ts 可以装tslint的插件 ...

  4. TypeScript完全解读(26课时)_4.TypeScript完全解读-接口

    4.TypeScript完全解读-接口 初始化tslint tslint --init:初始化完成后会生成tslint.json的文件 如果我们涉及到一些规则都会在这个rules里面进行配置 安装ts ...

  5. TypeScript完全解读(26课时)_6.TypeScript完全解读-泛型

    6.TypeScript完全解读-泛型 创建实例ts文件generics.ts 在index.ts内引入 fill是填充数组,创建的数组的元素数是times,填充的值就是接收的value的值 这里传入 ...

  6. TypeScript完全解读(26课时)_9.TypeScript完全解读-TS中的类

    9.TypeScript完全解读-TS中的类 创建class.ts文件,并在index.ts内引用 创建一个类,这个类在创建好后有好几个地方都标红了 这是tslint的一些验证规则 一保存就会自动修复 ...

  7. TypeScript完全解读(26课时)_10.TypeScript完全解读-枚举

    10.TypeScript完全解读-枚举 新建enum.ts并在jindex.ts中引用 一个简单的数字枚举 可以通过两种方式获取枚举的值 获取到编码,第一个默认为0,后面的一次递增 第二种形式 可以 ...

  8. TypeScript完全解读(26课时)_11.TypeScript完全解读-类型推论和兼容性

    11.TypeScript完全解读-类型推论和兼容性 在一些时候省略指令,ts会帮我们推断出省略的类型的地方适合的类型,通过学习ts的类型推论了解ts的推论规则 类型兼容性就是为了适应js灵活的特点, ...

  9. TypeScript完全解读(26课时)_13.TypeScript完全解读-高级类型(2)

    13.TypeScript完全解读-高级类型(2) 高级类型中文网的地址:https://typescript.bootcss.com/advanced-types.html 创建文件并在index. ...

随机推荐

  1. 笔记11 export to excel

    参考两篇博客:http://blog.csdn.net/zyming0815/article/details/5939104 http://blog.csdn.net/g710710/article/ ...

  2. HDU 2102 A计划 (BFS)

    A计划 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  3. 再过半小时,你就能明白kafka的工作原理了

    本文在个人技术博客不同步发布,详情可猛戳 亦可扫描屏幕右侧二维码关注个人公众号,公众号内有个人联系方式,等你来撩... 为什么需要消息队列 周末无聊刷着手机,某宝网APP突然蹦出来一条消息" ...

  4. Kubernetes基本概念之Label

    系列目录 在为对象定义好Label后,其他对象就可以通过Label来对对象进行引用.Label的最常见的用法便是通过spec.selector来引用对象. apiVersion: v1 kind: R ...

  5. MacOS 修改主机名

    修改主机名 sudo scutil --set HostName xxx 修改共享名 sudo scutil --set ComputerName xxx

  6. Oracle比较时间大小

    1,比较当前时间与指定时间相差分钟数:    select sysdate,  sysdate - to_date('2007-04-03 13:45:39','yyyy-mm-dd hh24:mi: ...

  7. 04 http协议模拟登陆发帖

    <?php require('./http.class.php'); $http = new Http('http://home.verycd.com/cp.php?ac=pm&op=s ...

  8. 基于EasyDarwin云平台实现的EasyClient客户端与EasyCamera摄像机之间的对讲与云台控制功能

    本文转自EasyDarwin团队Kim的博客,感谢Kim长期对EasyDarwin开源项目的贡献:http://blog.csdn.net/jinlong0603 EasyDarwin云平台是一套由E ...

  9. 安装DotNetCore.1.0.1-VS2015Tools.Preview2.0.3引发的血案

    1.下载了一个开源项目,是用netcore开发的 2.VS2015打不开解决方案 3.于是安装DotNetCore.1.0.1-VS2015Tools.Preview2.0.3 4.安装成功,项目顺利 ...

  10. flume采集微信小程序数据

    flume采集微信小程序数据 flume收集前端埋点数据[1]POST请求http://f.x.com:50000数据格式: JsonArray数据格式示例:[{ "headers" ...