前面我们说完了对象和数组的定义,接下来就是一个重头戏---函数。函数可谓是在程序猿界无处不在,不管你学什么语言,都会接触到函数,我看有的文章将函数定义为一等公民,这就可以看得出函数对于我们来说地位是多么的高,是多么的重要,废话不多说,我们进入正题。

老样子,我们先说一下在JavaScript中,对于函数的定义和使用。什么是函数?函数就是被开发者用来执行某一项或多项功能任务的代码块。在JS中定义函数的方式通常有以下几种:

// 方式1
var sum = function (a, b) {return a + b
}// 方式2
function sum(a, b) {return a + b
}// 方式3
var sum = (a, b) => a + b// 方式4
var sum = new Function("a", "b", "return a + b")

其中,方式1和方式2比较常见,方式3是ES6中的箭头函数表达式,这种箭头函数表达式很好的解决了开发中的this指向问题,后续会出一篇博客单独讲解这个,在这里就不赘述了,方式4是以构造函数的方式,在实际开发中用的很少,了解即可。

下面说一下在typescript中函数的定义方式,结合前面关于对象及数组的定义方式,我们可以采取结合数据类型定义的方式来定义函数(类似于上述JavaScript定义方式2),如下:

// 声明函数中的输入和输出的数据类型
function sum(x: number, y: number): number {return x + y;
}

在这里我们定义了函数sum的输入和输出的数据类型,均为number类型,所以在调用函数的时候必须按照定义的格式严格执行,以下调用的方式均为错误方式,如下:

// 情形一:参数比定义的多
function sum(x: number, y: number): number {return x + y;
}
sum(1, 2, 3);  // 编译报错:Expected 2 arguments, but got 3.// 情形二:参数比定义的少
function sum(x: number, y: number): number {return x + y;
}
sum(1);  // 编译报错:Expected 2 arguments, but got 1.// 情形3:参数类型不是定义的数据类型及其子类型
function sum(x: number, y: number): number {return x + y;
}
sum(1, '2');   // 编译报错:Argument of type '"2"' is not assignable to parameter of type 'number'.

当然,我们可以写类似于上述JavaScript中方式一的定义方式来定义函数表达式,如下:

let sum = function (x: number, y: number): number {return x + y;
}

上面这样的写法没有错,但是不够严谨,因为我们可以看到上面的写法仅对表达式右边的函数的类型进行了定义,而没有对等号左侧的进行定义,这样就类似于我们前面提到的数据类型推论,根据右侧的定义来推断左侧的类型,所以,我们可以在定义右侧类型的同时,也给左侧添加类型,如下:

let sum: (x: number, y: number) => number = function (x: number, y: number): number {return x + y;
}

这种定义方式中,可以看到一个熟悉的符号 '=>',瞬间想起了箭头函数,有木有!!!!!!可惜,这里的 '=>'跟箭头函数的那个完全没关系,在 typescript 的类型定义中,'=>'用来表示函数的定义,左边是输入类型,需要用括号括起来,右边是输出类型。切记!!!!

我们一直在重复一句话,万物皆对象,是的,函数也可以用类似于对象接口的定义方式,如下:

// 创建一个Sum的接口,定义输入输出数据类型
interface Sum{(x: number, y: number): number;
}
// 定义一个函数sum,它的类型是Sum
let sum: Sum;
// 创建函数sum,它的类型要符合接口Sum的定义
sum = function(x: number, y: number) {return x + y;
}

typescript的定义就说到这,我们接下来看一下关于typescript中函数的一些特性:

(1)定义函数时,参数可选,而且可选参数必须在后面,如下:

function sum(x: number, y?: number) {   // 切记:可选参数必须放在后面,不然会报错if (y) {return x + y;} else {return x;}
}
let sum_1 = sum(1, 2);
let sum_2 = sum(1);

(2)定义函数时,设置默认参数,设置的顺序没有限制,如下:

function sum(x: number, y: number = 3) {return x + y
}
let sum_1 = sum(1, 2);
let sum_2 = sum(1);function sum(x: number = 3, y: number) {return x + y
}
let sum_1 = sum(1, 2);
let sum_2 = sum(undefined, 1);  // 注意这里的参数传入方式,如果定义默认参数的位置不在后面,那么我们需要一个占位的数据变量来占据输入参数的位置,而且TS编译也会报错:Expected 2 arguments, but got 1.

(3)定义函数时,可以利用...rest来表示剩余参数,这里的rest表示的就是参数,如下:

function push(array, ...items) {items.forEach(function(item) {array.push(item);});
}let a = [];
push(a, 1, 2, 3);// 这样看上去比较懵哈,附上编译好的JS代码作对比function push(array) {var items = [];for (var _i = 1; _i < arguments.length; _i++) {items[_i - 1] = arguments[_i];}items.forEach(function (item) {array.push(item);});
}
var a = [];
push(a, 1, 2, 3);

(4)重载,就是允许一个函数接受不同数量或类型的参数时,作出不同的处理,也就是允许多类型的参数,我们要利用联合类型的方法来定义函数,如下:

function getResult(x: number): number;
function getResult(x: string): string;
function getResult(x: number | string): number | string {   // 重载的特性:最后一个相同函数名的会覆盖之前函数if (typeof x === 'number') {return x + 2} else if (typeof x === 'string') {return x + 'kreme'}
}

到底啦!!!!!!

TypeScript学习(六):函数的定义及特性相关推荐

  1. Kotlin学习笔记-----函数的定义

    函数定义 kotlin的函数其实就是java中的方法, 名字不一样, 定义方式和java中也类似, 函数名(方法名), 参数, 返回值 区别在于, kotlin的函数定义需要加上fun, 这里和jav ...

  2. typescript学习之函数

    函数 申明函数 function run():string{ return 'str' } // 该函数必须返回一个string 匿名函数 var run = function ():void{} / ...

  3. TypeScript学习(七):类型断言

    前面我们提到了值类型,在我们设置值类型的时候,有一种定义方式就是联合类型的设定,如下: let a: number | string; a = 1; // 类型推论:此时变量a为number类型 a ...

  4. TypeScript 学习一 参数,函数,析构表达式

    1,TypeScript是由微软开发的,不过新出的Angular2框架就是谷歌公司由TypeScript语言编写的,所以现在TypeScript是有微软和谷歌一起支持的: 2,TypeScript在j ...

  5. typescript学习之路(三) —— ts定义类的方法(包含es5以及es6的定义类)

    提起类,不得不说一下,强类型编程语言,如php,java,c++等都有类的概念.而js作为一门弱类型语言,是没有类这个概念的,虽然也能模拟类的实现,但总归不是类.so,ts也只是模拟类而已,使得更贴切 ...

  6. java min 函数的使用方法_【Python】Java程序员学习Python(五)— 函数的定义和使用...

    不想做一个待宰的羔羊!!!!要自己变得强大.... 函数的定义和使用放在最前边还是有原因的,现在语言趋于通用,基本类型基本都是那些,重点还是学习对象的使用方法,而最根本的还是方法的使用,因此优先介绍, ...

  7. python函数第二次运行报错_Python学习笔记2-函数、高级特性

    函数 调用函数 要调用一个函数,需要知道函数的名称和参数,比如求绝对值的函数abs,只有一个参数 >>> abs(100) 100 >>> abs(-20) 20 ...

  8. JavaScript学习笔记(七)——函数的定义与调用

    在学习廖雪峰前辈的JavaScript教程中,遇到了一些需要注意的点,因此作为学习笔记列出来,提醒自己注意! 如果大家有需要,欢迎访问前辈的博客https://www.liaoxuefeng.com/ ...

  9. python函数的特性_Python学习(007)-函数的特性

    一..函数是什么 定义: 函数是指将一组语句的集合通过一个名字(函数名)封装起来,要想执行这个函数,只需调用其函数名即可 特性: 1.代码重用 2.保持一致性 3.可扩展性 二.创建 2.1格式 1 ...

最新文章

  1. Java初学者如何自学和自己定位解决问题
  2. android screen monitor怎么用
  3. windows获取文件夹下所有文件名的方法
  4. 【软考-软件设计师】程序设计的基本成分
  5. 「开源」首次被列入“十四五”规划,未来大有可为
  6. ubuntu11.04 安装sun-java6-jdk_Ubuntu下安装sun-java6-jdk和eclipse
  7. centos php 开启socket,centos下phpsocket连接,该如何解决
  8. 语法和c区别_dockerfile语法
  9. Excel数据导入数据库(Java)
  10. 基于MySQL的调度系统_仓储调度系统的设计与实现(SSH,MySQL)
  11. 如何在 Mac 上修改鼠标指针颜色?
  12. shell 的source指令和.指令
  13. 大一计算机php认证考试,2017年计算机基础大一考试试题【附答案】.doc
  14. Java-RPC通信--HSF框架
  15. 配合python的rich库实现高颜值LOL服务器状态查询
  16. 用python实现人脸识别毕设_用Python实现一个简单的人脸识别,原来我和这个明星如此相似...
  17. c语言给bmp图片加滤镜,图片编辑器PixelStyle: 图像处理,滤镜特效
  18. mapboxgl - 用webgl展示海量数据,是否可行?
  19. 性能测试报告不会写?最标准的模板来了
  20. java 调用oracle视图,Oracle视图的使用

热门文章

  1. Android 最火高速开发框架AndroidAnnotations使用具体解释
  2. android 拖动按钮
  3. SQLServer扩展存储过程
  4. asp.net中前台javascript与c#函数相互调方法
  5. 创建Variant数组
  6. ZABBIX Agent2监控docker
  7. 如何在 Zabbix 执行远程主机的脚本或指令?如何用 Zabbix 监控网站的访问量?
  8. ELK应用之Filebeat
  9. Shell脚本实现SSH免密登录及批量配置管理
  10. MyEclipse注册码