【TypeScript】从零开始玩转TypeScript - TypeScript中的函数

前言

小伙伴们大家好。今天要给大家分享的是TypeScript中的函数。无论是前端语言还是后端语言，函数都是必不可少的一部分。函数是一起执行一个任务的语句，也就是说在函数中封装了一堆代码，这堆代码会共同完成一个任务。这样既便于代码的可重用也便于后期维护，比如说有一段代码需要重复执行，那么这个时候就可以把这些需要重复执行的代码封装成一个函数，然后哪里用到就在哪里调用函数即可，从而实现的代码的可重用性。下面我们就来看看TypeScript中的函数。

函数

TypeScript中虽然已经支持类，命名空间和模块了，但函数依然是定义行为的主要地方。并且与JavaScript中的函数相比，TypeScript的函数还添加了额外的功能，让我们更容易的使用它们。与JavaScript中的函数一样，TypeScript中的函数也分为具名函数、匿名函数和箭头函数，并且函数的定义也是通过关键字function来定义的（箭头函数除外），下面看下具体代码：

//具名函数
function add(x, y){
   
	return x + y;
}

//匿名函数
let add = function(x, y){
    return x + y;}

let add = (x, y)=>{
    x + y }

let result = add(10, 20); // 30

如上代码我们分别定义了具名函数、匿名函数和箭头函数，最后都能实现相同的效果。这段代码看上去跟JavaScript中的函数定义并没有什么不同，但是我们上面说了：TypeScript中的函数与JavaScript的相比还增加了一些额外的功能。下面我们一起看下具体都增加了哪些功能：

• 函数支持为参数添加数据类型，同时也可以为函数本身指定返回值类型
• 函数的参数可分为：必选参数、可选参数、默认值参数和剩余参数
  • 必选参数：必选参数不能省略，在调用函数时必须要传递一个过去
  • 可选参数：在JavaScript函数中每个参数都可作为可选参数，如果调用时不传递值，默认是undefined。而在TypeScript函数中，可选参数通过 参数名? 的形式来定义一个可选参数。需要注意的是：可选参数必须要放在必选参数后面定义
  • 默认值参数：默认值参数就是在定义函数时可以给参数指定一个默认值，默认值参数可以在必选参数之前，也可以定义在必选参数之后；如果定义在必选参数之后，默认值参数与可选参数一样可以不用传递，在调用函数时直接使用默认值。但如果默认值参数定义在必选参数之前，那么在调用函数时默认值参数也是必须要传递的：可以传递一个具体的值，如果想使用默认值则需传递一个undefined。
  • 剩余参数：上面提到的三种参数，不管是必选参数、可选参数还是默认参数，它们的共同点是：只能代表一个参数。而有些时候我们不确定会有多个少参数，这时就可以定义一个剩余参数，剩余参数不受限制，可以一个都不传也可以传递任意个。定义方式是通过3个点（…）来定义， 如…args：string[]
• 函数的返回值可以省略，程序会根据函数中的return语句自动推断具体的返回值类型
• 声明变量时，函数可以作为一种数据类型（函数类型）来约束这个变量
  • 作为函数类型使用时，不需要function关键字
  • 函数类型的返回值类型需要借助（=>）符号来指定（这里不代表箭头函数）
  • 用函数类型声明的变量在赋值时也必须要符合函数的定义（如参数个数及类型，返回值类型）

代码示例

• 定义一个包含参数类型和返回值类型的函数

function Add(x: number, y: number):number{
   
	return x + y
}

• 必须参数、可选参数、默认参数、剩余参数

//必选参数====