一步一步学习TypeScript(10.Functions_函数)

函数(function)分为署名函数(named function)和匿名函数(anonymous function)看代码

// named function               
function sub(x,y){
    console.log(x-y);
}       

// anonymous function
var sub1 = function(x,y){
    console.log(x-y);
}

完善上面的代码,增加类型相关信息

function sub(x: number, y: number): number{
    return x-y;
}

var sub1 = function(x: number, y: number): number{
    return x-y
}

让我们写出函数的完整类型,看上去是这样的,使用=>符号连接参数类型与反回值类型,如果没有任何反回值时要记得添写void.

var sub2: (x: number, y:number)=>number = function(x: number, y:number): number{
    return x-y;
}

// 只要类型相匹配就可以,名称无关紧要,增加函数类型在我看来只是为了增加函数的可读性
var sub2: (source: number, dest:number)=>number = function(x: number, y:number): number{
    return x-y;
}

在看下面的例子,TypeScript都能正确的判断出函数所对应的类型.

//右边指定类型,左边没有指定
var sub3 = function(x: number, y: number): number{
    return x-y;
}
//左边指定类型,右边没有指定
var sub4: (x: number, y:number)=>number = function(x, y): number{
    return x-y;
}

大家都知道.在JavaScript里函数的参数是可有可无的,而在TypeScript中每个参数都是必需的,即声明时需要传入两个参数,在使用时传入的参数个数必需是两个而且类型必需一致,否则在编译时就会抛出错误.

function twoParam(one: string, two: string):string{
    return one + two;
}

twoParam('a','b');
twoParam('a');      //错误,参数数量不匹配
twoParam('a','b','c');  //错误,参数数量不匹配

如果就想在TypeScript中使用可选的参数,需要在不确定的参数后面加上?符号,需要说明的是可选参数必需放到最后,例如:

function buildName(firstName: string, lastName?: string) {
    if (lastName)
        return firstName + " " + lastName;
    else
        return firstName;
}

var result1 = buildName("Bob");  //正确
var result2 = buildName("Bob", "Adams", "Sr.");  //错误, 参数数量不匹配
var result3 = buildName("Bob", "Adams");  //正确

为可选参数指定一个默认值

function buildName(firstName: string, lastName = 'pope') {
    // ...
}

如果我们不确定可选参数的个数

function buildName(firstName: string, ...restOfName: string[]) {
  return firstName + " " + restOfName.join(" ");
}

var employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

Lambda 和 this
在javascript中使用this是非常容易因为上下文不同,使用this时得出错误的结果.例如:

var myObj = {
    name: 'weiqi',

    say: function(str:string){
        return function(){
            console.log(this.name + ' ' + str);
        }
    }
}

var say = myObj.say('hello');
say(); // 输出为 undefined hello

可以看到this.name反回结果为undefined, 说明this没有绑定到myObj这个上下文中.如果改用Lambda写法的话,TypeScript会在编译时自动为我们绑定this到当前上下文中. 可以改造上个例子为:

var myObj = {
    name: 'weiqi',

    say: function(str:string){      
        return () => console.log(this.name + ' ' + str);
    }
}

var say = myObj.say('hello');
say(); // 输出 weiqi hello

函数的重载
重载的好处为,在编写代码时由编译器负责检查传入参数类型及反回类型,使用时可以反回与传入参数类型相匹配的反回类型.看例子:

function add(arg1: string, arg2: string): string; //重载1
function add(arg1: number, arg2: number): number; //重载2
function add(arg1: boolean, arg2: boolean): boolean;//重载3
//这是对上面重载的实现
function add(arg1: any, arg2: any): any {
    return arg1 + arg2;
}

//只能传入之前定义后的3种参数类型,如果传入其它组合类型则会得到一个错误
console.log(add(1, 2)); //反回类型为number
console.log(add("Hello", "World")); //反回类型为string
console.log(add(true, false)); //反回类型为boolean