TypeScript学习笔记(三) - 方法
本篇将介绍在TypeScript里如何定义和使用方法。
一、方法标准声明和使用
// 方法声明
function func(x: number, y: number): number {
return x + y;
}
在TypeScript里,方法声明可以明确定义每一个参数的类型,和返回值的类型。在编译时,编译器会检查方法体的返回值类型是否符合定义的类型,同时在调用的时候也会检查传入的参数类型是否符合定义的类型,参数个数是否符合定义的个数。
let result1 = func(1, 2); // 正确的调用方式。
let result2 = func_lambda(1, 2, 3); // 错误的调用方式。参数个数多余定义。
let result3 = func_lambda(1); // 错误的调用方式。参数个数少于定义。
let result4 = func_lambda('1', '2'); // 错误的调用方式。参数类型不符合定义。
另外,方法声明也支持使用Lambda表达式。
// lambda表达式声明
let func_lambda: (x: number, y: number) => number = function (x, y) { return x + y };
二、缺省参数声明
在某些情况下,方法调用只需要传入部分参数。TypeScript也支持缺省参数的声明方式。
// 缺省参数定义
let showName = function (firstName: string, lastName?: string): string {
if (lastName) {
return firstName + ' ' + lastName;
} else {
return firstName;
}
}; let wholeName1 = showName('星辰', 'Lee');
let wholeName2 = showName('星辰');
通过在参数名称后面加上?,标识该参数是缺省的,调用时如果对应参数位置不传入,对应参数位置则为undefined。
三、默认值参数声明
在某些情况下,方法调用时某些参数在不传入时,默认使用方法定义的值。TypeScript同样支持默认值参数的声明方式。
// 默认值参数定义
let showName2 = function (firstName: string, lastName = 'Lee'): string {
return firstName + ' ' + lastName;
}; let wholeName3 = showName2('星辰');
通过在参数名称后加上=号并赋值,标识该参数具有默认值。调用时如果对应参数位置不传入或者传入undefined,则取默认值,否则取对应位置传入的值。
四、多参数声明
像其他强类型语言一样,TypeScript在定义方法的时候,也支持不明数量的多参数传入。
// 多参数定义
let restParamsFunc = function (param1: string, ...restParams: string[]): string {
return param1 + ' ' + restParams.join(' ');
}; let resParamsFuncResult = restParamsFunc('a', 'b', 'c');
通过在参入名称前加上...(三个小数点),标识对应位置的参数可以传入多个。因为参数类型已明确定义,所以传入的多个参数的类型必须与定义保持一致,否则编译时将提示错误。
五、其他类型参数声明
对象类型:
// 对象类型参数
let jsonParamFunc = function (x: { p1: string }): string {
return x.p1;
}; let jsonParamFuncResult1 = jsonParamFunc({ p1: 'a' }); // 赋值类型正确
let jsonParamFuncResult2 = jsonParamFunc({ p1: 'a', p2: 'b' }); // 赋值类型错误,参数属性比定义的多。
let jsonParamFuncResult3 = jsonParamFunc({ p3: 'c' }); // 复制类型错误,参数属性名不匹配。
let params = { p1: 'a', p2: 'b' };
let jsonParamFuncResult4 = jsonParamFunc(params); // 用变量代替直接复制,编译器检查通过。
上面的例子里,参数类型被定义为一个拥有属性“p1”的json对象。在方法调用时,传入的参数将严格符合参数类型的定义,参数对象的属性多余或者少于定义将提示错误,属性名称与定义不一致也将提示错误。
但是,如果传入的是一个变量,变量的属性只要能满足定义的类型属性即可。
方法类型:
// 方法类型参数
let funcParamFunc = function (func: (x: string, y: string) => string): string {
let _x = 'a';
let _y = 'b';
return func(_x, _y);
}; let funParamFuncResult = funcParamFunc(function (x, y) { return x + y });
方法参数类型可定义为一个固定结构的方法,该方法就成为了一个回调方法。
六、方法重载
TypeScript也支持方法重载。
// 方法重载
function overloadFunc(x: { p1: string }): string;
function overloadFunc(x: number): number;
function overloadFunc(x): any {
if (typeof x == 'object') {
return x.p1;
} if (typeof x == 'number') {
return x;
}
} let overloadFuncResult1 = overloadFunc({ p1: 'a' });
let overloadFuncResult2 = overloadFunc(1);
在上面的例子里,连续声明了拥有同一个名称的三个方法:
前两个方法只有方法定义,没有方法体。它们定义了重载方法的个数和表现形式。
最后一个方法的参数没有定义类型,返回值定义为any,同时有方法体。它定义了重载方法的具体实现。
最后,将以上代码编译过后的JavaScript代码展示出来,可以进行对比。
// 方法声明
function func(x, y) {
return x + y;
}
var result1 = func(1, 2); // 正确的调用方式。
var result2 = func_lambda(1, 2, 3); // 错误的调用方式。参数个数多余定义。
var result3 = func_lambda(1); // 错误的调用方式。参数个数少于定义。
var result4 = func_lambda('1', '2'); // 错误的调用方式。参数类型不符合定义。
// lambda表达式声明
var func_lambda = function (x, y) { return x + y; };
// 缺省参数定义
var showName = function (firstName, lastName) {
if (lastName) {
return firstName + ' ' + lastName;
}
else {
return firstName;
}
};
var wholeName1 = showName('星辰', 'Lee');
var wholeName2 = showName('星辰');
// 默认值参数定义
var showName2 = function (firstName, lastName) {
if (lastName === void 0) { lastName = 'Lee'; }
return firstName + ' ' + lastName;
};
var wholeName3 = showName2('星辰');
// 多参数定义
var restParamsFunc = function (param1) {
var restParams = [];
for (var _i = 1; _i < arguments.length; _i++) {
restParams[_i - 1] = arguments[_i];
}
return param1 + ' ' + restParams.join(' ');
};
var resParamsFuncResult = restParamsFunc('a', 'b', 'c');
// 对象类型参数
var jsonParamFunc = function (x) {
return x.p1;
};
var jsonParamFuncResult1 = jsonParamFunc({ p1: 'a' }); // 赋值类型正确
var jsonParamFuncResult2 = jsonParamFunc({ p1: 'a', p2: 'b' }); // 赋值类型错误,参数属性比定义的多。
var jsonParamFuncResult3 = jsonParamFunc({ p3: 'c' }); // 复制类型错误,参数属性名不匹配。
var params = { p1: 'a', p2: 'b' };
var jsonParamFuncResult4 = jsonParamFunc(params); // 用变量代替直接复制,编译器检查通过。
// 方法类型参数
var funcParamFunc = function (func) {
var _x = 'a';
var _y = 'b';
return func(_x, _y);
};
var funParamFuncResult = funcParamFunc(function (x, y) { return x + y; });
function overloadFunc(x) {
if (typeof x == 'object') {
return x.p1;
}
if (typeof x == 'number') {
return x;
}
}
var overloadFuncResult1 = overloadFunc({ p1: 'a' });
var overloadFuncResult2 = overloadFunc(1);
TypeScript学习笔记(三) - 方法的更多相关文章
- 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 学习笔记四:回忆ES5 中的类
中文网: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 ...
- angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令
在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...
- [Firefly引擎][学习笔记三][已完结]所需模块封装
原地址:http://www.9miao.com/question-15-54671.html 学习笔记一传送门学习笔记二传送门 学习笔记三导读: 笔记三主要就是各个模块的封装了,这里贴 ...
- java之jvm学习笔记三(Class文件检验器)
java之jvm学习笔记三(Class文件检验器) 前面的学习我们知道了class文件被类装载器所装载,但是在装载class文件之前或之后,class文件实际上还需要被校验,这就是今天的学习主题,cl ...
随机推荐
- sql server 将时间中的时分秒改为00:00:00
select convert(varchar(10),getdate(),120
- 33Sql数据删除与遍历
数据库的创建.添加.修改.查询.删除都是利用SQL语句和类QSqlQuery的结合. QSqlDatabase::database().可返回当前正在打开的数据库对象. 数据库的删除 //获取删除的名 ...
- python使用set来去重碰到TypeError: unhashable type
新版:Python 的 unhashable type 错误分析及解决 python使用set来去重是一种常用的方法. 一般使用方法如下: # int a = [1, 2, 3, 4, 5, 1, 2 ...
- FlexPaper_1.2.1.swc——Flex在线显示PDF文档(使用FlexPaper)感悟
http://www.cnblogs.com/wuhenke/archive/2010/03/16/1686885.html 想想自己先前搞PDF转SWF,然后在线浏览功能时,实在是费了不少精力.后来 ...
- ubuntu14.04 安装mono
sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys 3FA7E0328081BFF6A14DA29AA6A19B38D3D831 ...
- DigitalOcean(edu用户)搭建VPS
免费上网FQ edu福利 edu邮箱 VPS VPN 1 申请 目的:利用edu邮箱的优惠获得digitalocean一年vpn,可以FQ或者免流. 1.1 准备工作 百度“github大礼包”,浏览 ...
- kylin-cube存储结构
前言 本篇文章通过图文的方式分析不同维度组合下的cube在hbase中的存储结构 需要声明的是,kylin不存原始数据,存储cube 全维度构建 假设一张表有3个字段name,age,sex,那么当通 ...
- .Net web 关于表单标题
今天跟以前同事学到一个好东西,就是后台web界面表单标题展示的一个方法,新学到的一个方法...赶紧分享一下 在model 属性上加 [DisplayName("标题"), Req ...
- Angular4笔记——表单状态相关的属性
表单状态字段(FromControl)touched和untouched用来判断用户是否访问过一个字段(也就是这个字段是否获取过焦点,如果获取过焦点,touched是true,untouched是fa ...
- 微信公众号开发之微信JSSDK
概述 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用微 ...