TypeScript学习笔记(四):函数
2015-10-25 20:55
351 查看
这篇笔记我们来看看TypeScript中的函数。
在TypeScript中对应的写法如下:
而TypeScript中对函数的类型也可以定义,比如我们上面的myAdd没有定义类型,则可以将任意类型的函数赋值给它,当然赋值函数以外的东西也可以,这当然是不好的一种做法,我们看看下面的另外一种写法:
这里我们将myAdd定义为必须是函数,同时必须是带有两个number参数返回值为number的函数,其它类型的函数赋值给myAdd会报错。
如果我们在使用到函数类型的地方都采用上面的写法会比较麻烦,所以可以先定义一个函数类型,在要使用到该类型的地方直接定义为该函数的类型即可,如下:
没有提供实参则lastName为undefined。
默认参数表示不填该参数则使用提供的默认值,如下:
这种写法存在一个问题,如果传入的实参没有width或height时运行时会报错但编译时不会报错,那么如何才能在编译时就进行类型判断呢?
一般其它语言都是使用接口来解决这个问题,但是TypeScript有一种更快捷的方法实现,如下:
同时也支持可选参数,但不支持默认参数,如下:
TypeScript的Lambda使用和C#中一致。
编译后的js如下:
更多消息可以查看:http://www.codebelt.com/typescript/arrow-function-typescript-tutorial/
函数类型
在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 } }
相关文章推荐
- 基于Theano的深度学习(Deep Learning)框架Keras学习随笔-18-Noise Layers
- 数据库范式
- 拓扑排序
- 嵌入式Linux根文件系统构建
- 《编程之法》练习题-1.1字符串的旋转
- mysql 性能优化方案
- ESP8266上的FreeRTOS初体验
- PyQt4 ShowHMDB show sqlite3 with QTableWidget summary
- Android入门:SDK介绍与安装选择
- 151025总结
- VC++/VS2010 Win32控制台程序 运行结束 dos窗口立刻消失/一闪而过 的解决方法
- MAC OS X 命令终端的颜色显示
- leetcode 88 ——Merge Sorted Array
- 常见浏览器bug(针对IE6及更低版本)及其修复方法
- ionic的start-y属性初始化页面
- IT猿涨工资必备技能--GCT答题技巧
- Codevs3286 火柴排队
- Java中的线程中断:interrupt()、interrupted()和isInterrupted
- Log4j简介
- 数据库安全