TypeScript学习笔记-6 函数

前言

出于学习提升、成果展示、记录心得等目的，我选择将自己的一点学习笔记放置出来，希望能够帮助到有需要的人，同时，由于个人知识的片面，文章中可能会出现不正确的地方，希望发现者可以及时指出，以便及时修正，不误导后来人。接下来就开始文章正文吧。

函数

基本示例

和JavaScript一样，TypeScript函数可以创建具名函数和匿名函数，以下两个函数为具备同一功能的函数的具名函数形式和匿名函数形式。

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

函数类型

正如接口一节中提过的，我们不仅可以通过接口的形式对函数设定数据类型，也可以通过直接类型批注的形式对数据类型进行设定，如下示例：

function sendMSG(value:number,user:string):boolean {
    return value>0;
}

我们在这里对函数sendMSG()的两个传入参数进行了相应的设定，value的类型设定为number，user的类型设定为string，而返回值的类型则是设定为布尔值。

可选参数和默认参数

同样与接口一节中类似，某些时候我们需要面对一些特殊的应用场景，比如说某个功能需要一个可选的判断值，比如防止BUG产生的一个默认但是可修改的值，这种时候我们就需要用到TypeScript的可选参数和默认参数了。

可选参数，顾名思义，就是传入之后可以发挥对应效果，不传入也不会报错的一种参数，在编译过程中，函数会自动检查所有参数是否传入，一旦发现传入的参数数量与函数期望的数量不符，便会报错，但是一些情况下我们希望部分参数可以绕开这个检测机制，这种时候我们便需要使用到可选参数，举例：

function partner(name:string,sex:string,couple?:boolean) {
    console.log("我们有一个成员名叫"+name+"，性别为"+sex);
    if (couple){
        console.log("而且这家伙有对象！")
    }
    else if(couple==false){
        console.log("这家伙是单身")
    }
}
partner("张三","男");
partner('欧皓辰','男',true);

由上图的示例可以看出，可选参数couple在第一次传参的时候并没有传入函数partner()，函数认为此刻参数couple的值为undefined，不影响函数的正常运作，而当第二次传参的时候我们传入了可选参数couple，此时函数中的判断通过，输出了对应的部分。

另外一个值得注意的是，可选参数需要排列在必须参数后面，否则会出错。

而默认参数也很容易理解，就是给参数设置一个默认的值，如果未传入该参数，那么就会调用其设定的默认值，若传入，则修改该参数的值为传入的值，如下示例

function partner(name:string,sex:string,couple:boolean=false) {
    console.log("我们有一个成员名叫"+name+"，性别为"+sex);
    if (couple){
        console.log("而且这家伙有对象！")
    }
    else if(couple==false){
        console.log("这家伙是单身")
    }
}
partner("张三","男");
partner('欧皓辰','男',true);

由上图可见，如果不传入参数couple，函数partner()会按照设定的默认值false进行后续的运算，但是如果传入相应的值，在函数内参数的值便会被修改为对应的传入值。

剩余参数

有时，我们可能会面对传入的参数数量未知的情况，这种时候我们可以考虑使用剩余函数。在TypeScript中，我们可以将多个参数收集到一个变量中，示例如下：

function partner(name:string,sex:string,...otherinfo:string[]) {
    console.log("我们有一个成员名叫"+name+"，性别为"+sex+' '+otherinfo.join(","));
}
partner("张三","男");
partner('欧皓辰','男','有女朋友','TEL：136XXXXXXXX');

这里我们设置了剩余参数otherinfo，剩余参数的声明格式为在参数前加上三个.（即英文输出省略号），比如本例中的...otherinfo，值得注意的是，剩余函数为数组格式。

this

因为TypeScrip是JavaScript的超集，所以在TypeScrip中this的功能和在JavaScript中一样，是在函数执行时指向调用其的目标。例如

let group={
    name:['张三','欧皓辰'],
    age:[38,20],
    partner:function () {
        let number=Math.floor(Math.random()*this.name.length);
        return {this:this,name:this.name[number],age:this.age[number]}
    }
}
let a=group;
console.log(a.partner())

在该程序中，this存在于对象a的内部函数partner()中，其指向的对象为调用其的a对象。

但有时this的使用也会出现问题，例如下图：
此处报错为无法找到undefined的length属性，为什么上一张图中程序运行没有问题呢？是因为此处的this的位置是在partner()的返回函数的返回值中定义的，由于this的性质，此处this所指向的是partner()这个函数，而非更上一层的group对象，故报错。要解决这个问题的话可以使用箭头函数，如下图

let group={
    name:['张三','欧皓辰'],
    age:[38,20],
    partner:function () {
        return () => {
            let number=Math.floor(Math.random()*this.name.length);
            return {this:this,name:this.name[number],age:this.age[number]}
        }
    }
}
let b=group.partner()
console.log(b)
let c=b();
console.log(c)

此处箭头函数能保存函数创建时的this值，而不是调用时的值，使此处的this指向group对象，从而不产生报错。

重载

JavaScript本身是一种动态的语言。 JavaScript里函数根据传入不同的参数而返回不同类型的数据是很常见的，而这种功能被我们称呼为函数的重载，示例如下：

function group(name:string):{name:string,age:number};
function group(content:{name:string,age:number}):string;
function group(x):any {
    if (typeof x=="string"){
        return {name:x,age:20};
    }
    else if (typeof x=="object"){
        return "该成员的名称为"+x.name+"，年龄为："+x.age;
    }
}
let a=group("欧皓辰");
console.log(a);
let b=group({name:"张三",age:38})
console.log(b)

上图中我们可以发现传入参数大不相同的a和b都成功运行，原因是它们分别符合1、2行所定义的函数类型，所以能够被函数识别并运行。此处值得注意的是，第三行并不是函数类型的定义，不是重载列表的一部分，故此处只有两个重载，其他的参数格式将会报错。