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
}
}
TypeScript学习笔记(四):函数的更多相关文章
- Typescript 学习笔记四:回忆ES5 中的类
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- python学习笔记(四):函数
一.函数是什么? 函数一词来源于数学,但编程中的「函数」概念,与数学中的函数是有很大不同的,编程中的函数在英文中也有很多不同的叫法.在BASIC中叫做subroutine(子过程或子程序),在Pasc ...
- Typescript 学习笔记三:函数
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- Typescript 学习笔记七:泛型
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- Typescript 学习笔记六:接口
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- Typescript 学习笔记五:类
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- Typescript 学习笔记二:数据类型
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- Typescript 学习笔记一:介绍、安装、编译
前言 整理了一下 Typescript 的学习笔记,方便后期遗忘某个知识点的时候,快速回忆. 为了避免凌乱,用 gitbook 结合 marketdown 整理的. github地址是:ts-gitb ...
- java之jvm学习笔记四(安全管理器)
java之jvm学习笔记四(安全管理器) 前面已经简述了java的安全模型的两个组成部分(类装载器,class文件校验器),接下来学习的是java安全模型的另外一个重要组成部分安全管理器. 安全管理器 ...
- ES6学习笔记<四> default、rest、Multi-line Strings
default 参数默认值 在实际开发 有时需要给一些参数默认值. 在ES6之前一般都这么处理参数默认值 function add(val_1,val_2){ val_1 = val_1 || 10; ...
随机推荐
- WPF 用 DataTemplate 合并DataGrid列表列头<类似报表设计>及行头列头样式 - 学习
WPF中 DataGrid 列头合并,类似于报表设计.效果图如下↓ 1.新建一个WPF项目WpfApplication1,新建一个窗体DataGridTest,前台代码如下: <Window x ...
- 监听某个div或其它标签的大小改变来执行相应的处理
jquery 默认的resize只能监听到浏览器窗口大小的改变,但我们在实际使用过程中有可能还需要监听某个div或其它标签的大小改变来执行相应的处理,如果使用默认的resize就无能为力了.怎么办呢, ...
- 让你的 Node.js 应用跑得更快的 10 个技巧(转)
Node.js 受益于它的事件驱动和异步的特征,已经很快了.但是,在现代网络中只是快是不行的.如果你打算用 Node.js 开发你的下一个Web 应用的话,那么你就应该无所不用其极,让你的应用更快,异 ...
- datatables使用总结篇
<!doctype html> <html> <head> <meta charset="gbk"/> <meta name= ...
- Delphi ORD
//Char 类型与其编码值的转换:varb: Byte;c: Char;beginb := Ord('A'); {返回: 65}b := Ord(#65); {返回: 65}b := Ord ...
- php-PHP试题
ylbtech-doc:php-PHP试题 PHP试题 1.A,PHP试题返回顶部 1.{PHP题目}标识符是变量的名称.PHP中的标识符用“$+变量名”来表示.标识符在PHP中遵循下列选项中的那些规 ...
- HDU 1025-Constructing Roads In JGShining's Kingdom(最长不降子序列,线段树优化)
分析: 最长不降子序列,n很大o(n^2)肯定超,想到了小明序列那个题用线段树维护前面的最大值即可 该题也可用二分搜索来做. 注意问题输出时的坑,路复数后加s #include <map> ...
- SDUT 3568 Rock Paper Scissors 状压统计
就是改成把一个字符串改成三进制状压,然后分成前5位,后5位统计, 然后直接统计 f[i][j][k]代表,后5局状压为k的,前5局比和j状态比输了5局的有多少个人 复杂度是O(T*30000*25*m ...
- codeforces 675D Tree Construction set
转自:http://blog.csdn.net/qwb492859377/article/details/51447350 #include <stdio.h> #include < ...
- xcode 怎么样在发布release版本的时候 不输出log
我们平时在开发应用的时候,经常会用到 NSLog 来调试我们的程序,而随着项目越来越大,这些用于调试的日志输出就会变得很难管理. 发布正式版的时候一定要屏蔽掉所有后台输出,因为这些输出还是比较消耗系统 ...