【TypeScript】TypeScript 学习 5——方法
在 JavaScript 中,有两种方式定义方法。
1、命名的方法
function add(x,y){
return x+y;
}
2、匿名方法
var myAdd = function(x,y) { return x+y;};
在 TypeScript 中,也兼容上面两种定义方式,但是,既然我们用的是 TypeScript,那么肯定要强于本来的定义方式。
1、类型化方法
function add(x:number, y:number):number{
return x+y;
} var myAdd = function(x:number, y:number):number {return x+y;};
为参数和返回值定义好类型,有助于智能感知和程序逻辑。
2、函数类型变量
在上面第一点,myAdd 变量的类型我们没有指定,完整的写法如下:
var myAdd: (x:number, y:number)=>number = function(x:number, y:number):number { return x+y; };
当然类型参数的命名可以不相同的
var myAdd: (baseValue:number, increment:number)=>number = function(x:number, y:number):number {return x+y;};
3、可选参数
function buildName(firstName: string, lastName?: string):string{
if(lastName){
return firstName + " " + lastName;
}
else{
return firstName;
}
}
在参数名后面,冒号前面添加一个问号,则表明该参数是可选的。
4、默认参数
function buildName(firstName: string, lastName = "Smith"):string {
return firstName + " " + lastName;
}
如果不传入第二个参数,那么将会被赋值为默认值。
注:可选参数和默认参数必须在参数列表的最后。
5、可变参数
function buildName(firstName: string, ...restOfName: string[]) {
return firstName + " " + restOfName.join(" ");
} var employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");
在参数名前面使用三个点表明该参数的个数是可变的,同样,也是必须在参数列表的最后。
6、lambda 和当前对象
在 JavaScript 中,this 关键字指代的是当前 function。那么我们就很有可能在定义方法时用错。参考下面:
var deck = {
suits: ["hearts", "spades", "clubs", "diamonds"],
cards: Array(52),
createCardPicker: function() {
return function() {
var pickedCard = Math.floor(Math.random() * 52);
var pickedSuit = Math.floor(pickedCard / 13); return {suit: this.suits[pickedSuit], card: pickedCard % 13};
}
}
} var cardPicker = deck.createCardPicker();
var pickedCard = cardPicker(); alert("card: " + pickedCard.card + " of " + pickedCard.suit);
那么在调用 createCardPicker 方法的时候,我们将不会得到预期的结果,因为 this 指的是当前 function,而不是 deck 对象。
为了解决这一点,TypeScript 引入 lambda 表示法
var deck = {
suits: ["hearts", "spades", "clubs", "diamonds"],
cards: Array(52),
createCardPicker: function() {
// Notice: the line below is now a lambda, allowing us to capture 'this' earlier
return () => {
var pickedCard = Math.floor(Math.random() * 52);
var pickedSuit = Math.floor(pickedCard / 13); return {suit: this.suits[pickedSuit], card: pickedCard % 13};
}
}
} var cardPicker = deck.createCardPicker();
var pickedCard = cardPicker(); alert("card: " + pickedCard.card + " of " + pickedCard.suit);
那么现在 this,就指代 deck 对象了。
7、方法重载
因为 JavaScript 的语法,所以是不存在重载的。只要你在 JavaScript 中定义了一个方法,那么传入多少个参数都是可以的。但是,从我们上面 TypeScript 的例子中,可以看出 TypeScript 是会检查参数个数、类型是否匹配的。因此 TypeScript 中是有必要存在重载。
var suits = ["hearts", "spades", "clubs", "diamonds"]; function pickCard(x: {suit: string; card: number; }[]): number;
function pickCard(x: number): {suit: string; card: number; };
function pickCard(x): any {
// Check to see if we're working with an object/array
// if so, they gave us the deck and we'll pick the card
if (typeof x == "object") {
var pickedCard = Math.floor(Math.random() * x.length);
return pickedCard;
}
// Otherwise just let them pick the card
else if (typeof x == "number") {
var pickedSuit = Math.floor(x / 13);
return { suit: suits[pickedSuit], card: x % 13 };
}
} var myDeck = [{ suit: "diamonds", card: 2 }, { suit: "spades", card: 10 }, { suit: "hearts", card: 4 }];
var pickedCard1 = myDeck[pickCard(myDeck)];
alert("card: " + pickedCard1.card + " of " + pickedCard1.suit); var pickedCard2 = pickCard(15);
alert("card: " + pickedCard2.card + " of " + pickedCard2.suit);
上面代码是 TypeScript 官方的例子,其实可以看出,我们方法体都需要写在一个参数类型、返回类型为 any 的方法中。所以看上去其实有点自欺欺人的意思。方法重载在 TypeScript 中的意义主要在于智能提示。
【TypeScript】TypeScript 学习 5——方法的更多相关文章
- typescript handbook 学习笔记4
概述 这是我学习typescript的笔记.写这个笔记的原因主要有2个,一个是熟悉相关的写法:另一个是理清其中一些晦涩的东西.供以后开发时参考,相信对其他人也有用. 学习typescript建议直接看 ...
- typescript handbook 学习笔记3
概述 这是我学习typescript的笔记.写这个笔记的原因主要有2个,一个是熟悉相关的写法:另一个是理清其中一些晦涩的东西.供以后开发时参考,相信对其他人也有用. 学习typescript建议直接看 ...
- typescript handbook 学习笔记2
概述 这是我学习typescript的笔记.写这个笔记的原因主要有2个,一个是熟悉相关的写法:另一个是理清其中一些晦涩的东西.供以后开发时参考,相信对其他人也有用. 学习typescript建议直接看 ...
- Angular2中实现基于TypeScript的对象合并方法:extend()
TypeScript里面没有现成的合并对象的方法,这里借鉴jQuery里的$.extend()方法.写了一个TypeScript的对象合并方法,使用方法和jQuery一样. 部分代码和jQuery代码 ...
- [TypeScript] TypeScript对象转JSON字符串范例
[TypeScript] TypeScript对象转JSON字符串范例 Playground http://tinyurl.com/njbrnrv Samples class DataTable { ...
- Java学习:方法的使用与注意事项
方法的使用与注意事项 定义一个方法的格式:public static void 方法名称(){ 方法体 } 如何调用方法,格式: 方法名称(): 方法名称的命名规则和变量一样,使用小驼峰. 方法体:也 ...
- 我的学习归纳方法(以学习Maven为例)
以我的个人角度来看待学习这件长久的事,希望对你有帮助,也希望你能提一下你的意见 本文初衷 把自己模板化 以此篇为引,与同行沟通心得,所以在此严重要求如果你有对应的心得还请能回复下,真心感谢!(鞠躬) ...
- TypeScript 快速学习
https://learnxinyminutes.com/docs/zh-cn/typescript-cn/ https://www.tslang.cn/docs/handbook/basic-typ ...
- Typescript开发学习总结(附大量代码)
如果评定前端在最近五年的重大突破,Typescript肯定能名列其中,重大到各大技术论坛.大厂面试都认为Typescript应当是前端的一项必会技能.作为一名消息闭塞到被同事调侃成"新石器时 ...
随机推荐
- 大型运输行业实战_day08_1_memcache缓存生产应用
1.memcache使用环境搭建 1.安装memcached服务器 安装方法 以管理员身份打开cmd,在cmd中执行如下命令: 注意:在执行该命令时必须在memcached.exe文件下执行. 2.开 ...
- distinct top執行順序
select distinct top 3 from table; 先distinct后top
- for循环语句输出菱形
for(int a = 5; a > 0 ; a--){ for(int b = 1; b <= a; b++){ System.out.print(" "); } f ...
- Java的Reflection机制
什么时候使用Reflection: 在java语言中,创建一个类的对象通常使用new operator,但是如果预先不知道Class的名字,类名是在程序运行过程中通过参数传递过来,就没法使用这种方法了 ...
- ios 点击Home问题
应用可以在后台运行或者挂起,该场景的状态跃迁过程见图2-22,共经历3个阶段4个状态:Active → Inactive → Background→Suspended. q 在Active→Ina ...
- [leetcode]314. Binary Tree Vertical Order Traversal二叉树垂直遍历
Given a binary tree, return the vertical order traversal of its nodes' values. (ie, from top to bott ...
- jDeveloper运行慢
最近在使用 Jdeveloper 10.1.3.3 版本时发现速度奇慢无比,后经Google,发现如下解决方案:在 jdev.conf 文件的末尾加上如下两行,速度即可得到显著的提高. AddVMOp ...
- 一、消息队列之ActiveMQ的安装、配置和C#样例代码
最近有时间了,研究一下消息队列ActvieMQ,结合自己的实践和网上的一些大家内容,整理如下,所有步骤和链接均是正确的. 1.ActiveMQ ActiveMQ 是Apache出品,最流行的,能力强劲 ...
- redhat配置java环境
1.检查是否有旧版本的jdk java -version java version "1.4.2" gij (GNU libgcj) version (Red Hat -) Cop ...
- 02 Maven 入门使用
Maven 入门使用 1. Maven 项目工程目录约定 Project |-src | |-main | | |-java -- 存放项目的 .java 文件 | | |-resources -- ...