TypeScript学习笔记（四）：函数

这篇笔记我们来看看TypeScript中的函数。

函数类型

在JavaScript中存在两种定义函数的方法，如下：

 //命名函数
 function add(x, y) {
     return x+y;
 }

 //匿名函数
 var myAdd = function(x, y) { return x+y; };

在TypeScript中对应的写法如下：

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

 var myAdd = function(x: number, y: number): number { return x+y; };

而TypeScript中对函数的类型也可以定义，比如我们上面的myAdd没有定义类型，则可以将任意类型的函数赋值给它，当然赋值函数以外的东西也可以，这当然是不好的一种做法，我们看看下面的另外一种写法：

var myAdd: (baseValue:number, increment:number)=>number =
    function(x: number, y: number): number { return x+y; };

这里我们将myAdd定义为必须是函数，同时必须是带有两个number参数返回值为number的函数，其它类型的函数赋值给myAdd会报错。

定义函数类型

看到这里你是不是焕然大悟了，这不就是C#的委托么？

如果我们在使用到函数类型的地方都采用上面的写法会比较麻烦，所以可以先定义一个函数类型，在要使用到该类型的地方直接定义为该函数的类型即可，如下：

 /**
  * 这里可以看做 C# 中的委托.
  */
 interface IProgressHandler
 {
     /**
      * 进度报告方法.
      * @param progress 进度.
      * @returns {} 无.
      */
     (progress:number):void;
 }

 class Loading
 {
     private _progressHandler:IProgressHandler;

     Load(url:string, callback:IProgressHandler)
     {
         this._progressHandler = callback;
         //加载完毕
         this._progressHandler(1.0);
     }
 }

 function run()
 {
     var load: Loading = new Loading();
     load.Load("http://xxx/", function(p:number):void
     {
         alert("加载：" + p);
     });
 }

 run();

可选和默认参数

可选参数，表示该参数可以填写也可以不填写，使用?:表示，如下：

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

 alert(buildName("LiLie"));
 alert(buildName("Meimei", "Han"));

没有提供实参则lastName为undefined。

默认参数表示不填该参数则使用提供的默认值，如下：

 function buildName(firstName:string, lastName:string = "Wang")
 {
     return firstName + " " + lastName;
 }

 alert(buildName("LiLie"));//LiLie Wang
 alert(buildName("Meimei", "Han"));//Meimei Han

对象参数类型

我们看一下下面的写法：

function getArea(quad:Object)
{
    return quad["width"] * quad["height"];
}

alert(getArea({width:10, height:20}));

这种写法存在一个问题，如果传入的实参没有width或height时运行时会报错但编译时不会报错，那么如何才能在编译时就进行类型判断呢？

一般其它语言都是使用接口来解决这个问题，但是TypeScript有一种更快捷的方法实现，如下：

 function getArea(quad:{width:number, height:number})
 {
     return quad.width * quad.height;
 }

 alert(getArea({width:10, height:20}));

同时也支持可选参数，但不支持默认参数，如下：

 function getArea(quad:{width:number, height?:number})
 {
     if (quad.height == undefined)
     {
         quad.height = 10;
     }
     return quad.width * quad.height;
 }

 alert(getArea({width:10}));

可变参数

可变参数表示可以任意填写任意参数，如下：

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

 alert(buildName("LiLie"));
 alert(buildName("LiLie", "MeimeiHan"));
 alert(buildName("LiLie", "MeimeiHan", "LinTao", "LaoWang"));

Lambda

简写的匿名函数，我们已上门的例子来看：

 /**
  * 这里可以看做 C# 中的委托.
  */
 interface IProgressHandler
 {
     /**
      * 进度报告方法.
      * @param progress 进度.
      * @returns {} 无.
      */
     (progress:number):string;
 }

 class Loading
 {
     private _progressHandler:IProgressHandler;

     Load(url:string, callback:IProgressHandler)
     {
         this._progressHandler = callback;
         //加载完毕
         alert(this._progressHandler(1.0));
     }
 }

 function run()
 {
     var load: Loading = new Loading();
     load.Load("http://xxx/", p => {
         alert("加载：" + p);
         return "Hello Lambda!";
     });
 }

 run();

TypeScript的Lambda使用和C#中一致。

Lambda和this

我们看一下这个例子：

 var messenger = {
     message: "Hello World",
     start: function() {
         setTimeout(() => { alert(this.message); }, 3000);
     }
 };
 messenger.start();

编译后的js如下：

 var messenger = {
     message: "Hello World",
     start: function () {
         var _this = this;
         setTimeout(function () {
             alert(_this.message);
         }, 3000);
     }
 };
 messenger.start();

更多消息可以查看：http://www.codebelt.com/typescript/arrow-function-typescript-tutorial/

重载

TypeScript的函数支持重载，同名函数可以根据参数类型及数量的不同来执行不同的逻辑，不过定义重载函数和其它语言稍微不同：在TypeScript中需要先写一些同名的函数声明，然后在一个同名函数里写出实现，而且需要自己判断参数类型（比较鸡肋）：

 function attr(name: string): string;
 function attr(name: string, value: string): Accessor;
 function attr(map: any): Accessor;

 function attr(nameOrMap: any, value?: string): any {
     if (nameOrMap && typeof nameOrMap === "object") {
         // handle map case
     }
     else {
         // handle string case
     }
 }