typescript箭头函数参数_TypeScript-如何定义函数类型

前言

函数是JavaScript中的一等公民，任何程序都需要使用函数构建抽象，TypeScript为了增强JavaScript中函数的能力，增加了别的强类型语言函数的用法。

一、基本使用

function add(x: number, y: number): number {

return x + y;

}

这里对参数和函数的返回值进行类型定义，要求x和y必须是numer类型，返回值必须是number类型。

函数的返回类型，TypeScript类型检查系统会根据函数体的返回值自行进行判断，所以你也可以这样做：

function add(x: number, y: number){

return x + y;

}

这在TypeScript中也是合理的。

也可以使用箭头函数定义匿名函数

let secondAdd: (x: number, y: number) => number;

secondAdd = function(x: number,y: number) {

return x + y;

}

同时和之前的例子一样，当你在函数引用中定义好了函数的参数类型和返回值类型，那么函数体不需要再次指定类型：

secondAdd = function(x,y) {

return x + y;

}

二、可选参数

在JavaScript中函数的参数个数一旦定义，调用函数的时候就必须传入相同个数的参数。

比如：

function xAddy(x, y) {

return x + y;

}

然后调用的时候我们只传入一个参数：

xAddy(1)

// Expected 2 arguments, but got 1

TypeScript中我们可以使用可选参数，使得函数的定义更加灵活：

function times(x: number, y?: number) {

if (y) {

return x * y

}

return x;

}

console.log(times(2));

// 2

console.log(times(2,3));

// 6

三、默认参数值

TypeScript中允许给指定参数值的函数参数指定默认值：

function secondTtimes(x: number, y = 3) {

return x * y;

}

console.log(times(2));

// 6

四、剩余参数

JavaScript中ES6也提出了剩余参数的概念，TypeScript中只是在此基础上了加了类型校验。

function thirdTimes(x: number, ...restOfNum: number[]) {

let result = x;

for (let i = 0; i < restOfNum.length;i++) {

result += restOfNum[i];

}

return result;

}

console.log(thirdTimes(2));

// 2

console.log(thirdTimes(2,3,5));

//10

五、函数中的this

使用函数，必定会涉及到this的指向问题，我们知道在JavaScript中this指向是一个让人很令人头疼的事情，TypeScript为this的使用加了新特性：允许你指定this的指向，并且可以将指定后的this作为函数的参数，this一旦指定后，其指向不会再改变。

定义一个简单的接口

interface thisObj {

name: string

getName:() => () => string

}

然后这样来使用这个接口：

let obj: thisObj = {

name: '马松松',

getName: function(this: thisObj) {

return () => {

return this.name;

}

}

}

let nameFunc = obj.getName();

console.log(nameFunc())

// 马松松

注意这里我们将this指定为了thisObj对象，在之前的JavaScript中，这样调用这个函数，this的指向是在非严格模式下是全局对象。

不过我这里有个疑问，既然this可以作为参数传递，那我这样使用可以吗？

let obj: thisObj = {

name: '马松松',

getName: function(this: thisObj) {

return function(this:thisObj) => {

return this.name;

}

}

}

let nameFunc = obj.getName();

console.log(nameFunc())

在这里我没有使用箭头函数，直接使用匿名函数，但是经过我的测试，这样使用竟然是不行的。

六、重载

TypeScript中也允许使用重载,所谓的重载是，定义多个函数名相同、传入参数类型不同的函数，根据不同的参数类型，由编译器选择执行匹配的函数。

首先定义重载列表，TypeScript会对重名的函数进行类型的匹配：

function overLoadE(x: {name: string,age: number}): string | number;

function overLoadE(x: string | number): {name?: string,age?: number};

function overLoadE(x: any):any{

if (typeof x == 'object') {

return `你的名字是：${x.name},你的年龄是${x.age}`;

}

if (typeof x == "string") {

return {name: x}

}

if (typeof x == 'number') {

return {age: x}

}

}

然后传入不同的参数：

console.log(overLoadE({name: '马松松', age: 18}));

// 的名字是：马松松,你的年龄是18

console.log(overLoadE("马松松"));

// { name: '马松松' }

console.log(overLoadE(18));

// { age: 18 }