TypeScript教程3

1、快速回顾一下这JavaScript中的命名函数和匿名函数:

纯文本查看 复制代码

1 2 3 4 5

//Named functionfunction add(x, y) {     return x+y; }   //Anonymous functionvar myAdd = function(x, y) { return x+y; };

2、TS简单函数例子

纯文本查看 复制代码

1 2 3 4 5

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

我们可以自定义每个参数和返回类型。
3、编写匿名函数一个函数的类型有相同的两个部分:参数和返回类型的类型。  这个名字只是帮助可读性。可以不一样，只要函数类型统一即可。

纯文本查看 复制代码

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

我们明确的返回类型使用(= >)表示。 
4、根据上下文判断返回类型
通过返回数据判断返回类型

纯文本查看 复制代码

1 2 3 4

// myAdd has the full function typevar myAdd = function(x: number, y: number): number { return x+y; };   // The parameters 'x' and 'y' have the type numbervar myAdd: (baseValue:number, increment:number)=>number =     function(x, y) { return x+y; };

5、默认参数如下写法，必须传入指定的变量，否则报错。

 纯文本查看 复制代码

1 2 3 4 5

function buildName(firstName: string, lastName: string) {     return firstName + " " + lastName; }   var result1 = buildName("Bob");  //error, too few parametersvar result2 = buildName("Bob", "Adams", "Sr.");  //error, too many parametersvar result3 = buildName("Bob", "Adams");  //ah, just right

我们在TS中使用?表示可选参数。 例如,我们希望最后一个参数是可选的:

纯文本查看 复制代码

1 2 3 4 5 6 7 8

function buildName(firstName: string, lastName?: string) {     if (lastName)         return firstName + " " + lastName;     else         return firstName; }   var result1 = buildName("Bob");  //works correctly nowvar result2 = buildName("Bob", "Adams", "Sr.");  //error, too many parametersvar result3 = buildName("Bob", "Adams");  //ah, just right

可选参数必须遵循必需的参数。 如果我们想让名可选而不是姓,我们需要改变参数在函数的顺序,把名字列表中的最后一个。

在TS中,我们还可以设定一个值,一个可选参数如果用户不提供。 这些被称为缺省参数。 让我们前面的示例和默认的姓“Smith”。

纯文本查看 复制代码

1 2 3 4 5

function buildName(firstName: string, lastName = "Smith") {     return firstName + " " + lastName; }   var result1 = buildName("Bob");  //works correctly now, alsovar result2 = buildName("Bob", "Adams", "Sr.");  //error, too many parametersvar result3 = buildName("Bob", "Adams");  //ah, just right

如下为缺省参数，即包含默认值。

纯文本查看 复制代码

1	function buildName(firstName: string, lastName = "Smith") {

6、rest参数

纯文本查看 复制代码

1 2 3 4 5

function buildName(firstName: string, ...restOfName: string[]) {         return firstName + " " + restOfName.join(" "); }   var employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

使用...代表一个变量集合。 7、Lambdas和使用“this”this在js中的使用是相当混乱的。通常要根据上下文来判断其含义。

让我们来看一个例子:

纯文本查看 复制代码

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17

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);

这时候会报错，因为this找不到suits，因为这个时候的this已经不是deck中的this了。

<1>为了解决这个问题,我们切换函数使用lambda表达式语法(()= > { })而不是JavaScript函数表达式。 这将自动捕获创建函数时可用的“this”:

纯文本查看 复制代码

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18

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);

<2>使用bind方法[希望我没有理解错]

纯文本查看 复制代码

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16

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().bind(deck);var pickedCard = cardPicker();   alert("card: " + pickedCard.card + " of " + pickedCard.suit);

更多信息方式,你可以阅读Yahuda卡茨 理解JavaScript函数调用和“this” 。 
==================================================