typescript|【TypeScript】从零开始玩转TypeScript - TypeScript中的函数 javascript|前端|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

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

函数支持为参数添加数据类型，同时也可以为函数本身指定返回值类型

函数的参数可分为：必选参数、可选参数、默认值参数和剩余参数

必选参数：必选参数不能省略，在调用函数时必须要传递一个过去

可选参数：在JavaScript函数中每个参数都可作为可选参数，如果调用时不传递值，默认是undefined。而在TypeScript函数中，可选参数通过参数名? 的形式来定义一个可选参数。需要注意的是：可选参数必须要放在必选参数后面定义

默认值参数：默认值参数就是在定义函数时可以给参数指定一个默认值，默认值参数可以在必选参数之前，也可以定义在必选参数之后；如果定义在必选参数之后，默认值参数与可选参数一样可以不用传递，在调用函数时直接使用默认值。但如果默认值参数定义在必选参数之前，那么在调用函数时默认值参数也是必须要传递的：可以传递一个具体的值，如果想使用默认值则需传递一个undefined。

剩余参数：上面提到的三种参数，不管是必选参数、可选参数还是默认参数，它们的共同点是：只能代表一个参数。而有些时候我们不确定会有多个少参数，这时就可以定义一个剩余参数，剩余参数不受限制，可以一个都不传也可以传递任意个。定义方式是通过3个点（…）来定义，如…args：string[]

函数的返回值可以省略，程序会根据函数中的return语句自动推断具体的返回值类型

声明变量时，函数可以作为一种数据类型（函数类型）来约束这个变量

作为函数类型使用时，不需要function关键字

函数类型的返回值类型需要借助（=>）符号来指定（这里不代表箭头函数）

用函数类型声明的变量在赋值时也必须要符合函数的定义（如参数个数及类型，返回值类型）

代码示例

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

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

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

//必选参数============================================================== function add(x:number, y:number):number{return x + y} //正确的调用 add(10, 20) // 30//错误的调用 add(); //报错 add(10) //报错 add(10,20,30) //报错//可选参数============================================================== function add(x:number, y?: number): number{ return x + y; } // 正确的调用 add(10, 20); //30 add(10); // 不会报错但返回结果是NaN// 错误的可选参数定义 function add(x?:number, y:number){}//这种情况会直接报错，可选参数不能放在必选参数之前//默认值参数(默认值参数在必选参数后面)============================================================== function add(x: number, y:number = 30){ return x + y; } add(10); // 40 add(10,20); // 30//默认值参数(默认值参数在必选参数前面)============================================================== function add(x: number = 20, y:number){ return x + y; } add(10); // 报错，x虽然有默认值，但程序依然会认为：10是给x的，而y又是必须参数，所以会报错 add(10,20); // 30 add(undefined, 20); // 40这样就是正确的用法：如果默认值参数定义在必选参数前，要想使用默认值则必须在对应位置上传递一个undefined//剩余参数============================================================== function add(...args:number[]):number{ let result:number = 0; args.forEach(item=>{ result += item }) return item; } add(); // 0 add(10); // 10 add(10,20)// 30 add(10,20,30); // 60 // ...

省略返回值，程序会根据return中的语句自动推断返回值类型

function add(x:number, y:number){ return x + y } typeof add(10,20) // number

函数作为数据类型声明变量

let add:(x:number, y:number) => number; // 作为类型使用时，返回值需要用 => 符号来表示 //如上，add就是一个函数类型的变量，它接收两个number类型的必选参数，返回值也是一个number类型 // 因此，在给变量add赋值时也必须是一个接收两个number类型参数，返回值类型为number的函数 //正确的赋值操作 add = function(x:number,y:number):number{return x+y} //错误的赋值 add = 123; //类型错误 add = function(x:number):number{}; //缺少参数 add = function(x:number, y:string):number{}//参数类型不匹配 add = function(x:number,y:number):string{}//返回值类型错误 add = function(x:number,y:number,z:number):number{}//参数个数不匹配 //也就是说赋值时的函数的参数个数，参数类型及返回值类型必须要与定义变量时的函数类型一模一样，否则就会报错

函数的重载

函数的重载一般是指：用相同的函数根据不同的参数列表来处理不同的业务逻辑。
在JavaScript中如果遇到同名的函数，那么下面的函数会把上面的函数覆盖掉，因此严格意义上来说JavaScript中是不存在函数的重载的，而在TypeScript中函数的重载是被允许的，但需要符合以下几个条件（特点）：

方法名称必须相同

参数列表必须不同（参数个数或者参数类型），返回值类型可以相同也可以不同

重载函数需要先声明再实现（缺一不可），并且实现需要紧跟着声明

//先声明 function add(x:number):number; function add(x:string, y:number):number; function add(x:number, y:number):number; //再实现，实现必须紧跟着声明，并且实现函数中的参数个数必须与上面声明中参数个数最少的保持一致，否则会报错 function add(x:any):number{//如果上面声明中返回值类型不同，这里可以用 any //具体的业务逻辑 return 1; }//重载函数的调用 add(1) add('hello', 10) add(10,20)

总结