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

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

// named function               function sub(x,y){    console.log(x-y);}       // anonymous functionvar 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; //重载1function add(arg1: number, arg2: number): number; //重载2function add(arg1: boolean, arg2: boolean): boolean;//重载3//这是对上面重载的实现function add(arg1: any, arg2: any): any {    return arg1 + arg2;}//只能传入之前定义后的3种参数类型,如果传入其它组合类型则会得到一个错误console.log(add(1, 2)); //反回类型为numberconsole.log(add("Hello", "World")); //反回类型为stringconsole.log(add(true, false)); //反回类型为boolean