TypeScript入门-函数

▓▓▓▓▓▓ 大致介绍

　　TypeScript为JavaScript函数添加了额外的功能，让我们可以更容易地使用。TypeScript中的函数也包括JavaScript中最常见的两种函数

function add(x,y){

    return x + y;

}

let add = function(x,y){

    return x + y;

}

▓▓▓▓▓▓ 函数类型

　　可以像变量一样为函数定义类型

function add(x: number, y: number): number {

    return x + y;

}

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

　　函数的完整类型

let add: (x: number,y: number) => number =

    function(x: number,y: number): number { return x + y};

　　完整的函数类型太过麻烦，推荐还是写简单的，而且如果函数没有返回值，最好设置为void，不要留空

▓▓▓▓▓▓ 可选参数和默认参数

　　注意：在TypeScript中传递给一个函数的参数个数必须与函数期望的参数个数一致。

function buildName(firstName: string, lastName: string) {

    return firstName + " " + lastName;

}

let result1 = buildName("Bob");                  // error

let result2 = buildName("Bob", "Adams", "Sr.");  // error

let result3 = buildName("Bob", "Adams");

　　可选参数应该可以猜到，没错，就是使用？

function buildName(firstName: string, lastName?: string) {

    if (lastName)

        return firstName + " " + lastName;

    else

        return firstName;

}

let result1 = buildName("Bob");  // works correctly now

let result2 = buildName("Bob", "Adams", "Sr.");  // error, too many parameters

let result3 = buildName("Bob", "Adams");  // ah, just right

　　默认参数都是老套路

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

    return firstName + " " + lastName;

}

let result1 = buildName("Bob");

let result2 = buildName("Bob", undefined);

let result3 = buildName("Bob", "Adams", "Sr.");  // error, too many parameters

let result4 = buildName("Bob", "Adams");

▓▓▓▓▓▓ 剩余参数

　　有时，你想同时操作多个参数，或者你并不知道会有多少参数传递进来。在JavaScript里，你可以使用arguments来访问所有传入的参数。

　　在TypeScript里，你可以把所有参数收集到一个变量里：

function buildName(firstName: string, ...restOfName: string[]) {

  return firstName + " " + restOfName.join(" ");

}

let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

　　你也可以操作这个变量

function buildName(firstName: string, ...restOfName: string[]) {

  return firstName + " " + restOfName.join(" ");

}

let buildNameFun: (fname: string, ...rest: string[]) => string = buildName;

▓▓▓▓▓▓ this

　　this是JavaScript中的难点之一，看看下面的代码

let deck = {

    suits: ["hearts", "spades", "clubs", "diamonds"],

    cards: Array(52),

    createCardPicker: function() {

        return function() {

            let pickedCard = Math.floor(Math.random() * 52);

            let pickedSuit = Math.floor(pickedCard / 13);

            return {suit: this.suits[pickedSuit], card: pickedCard % 13};

        }

    }

}

let cardPicker = deck.createCardPicker();

let pickedCard = cardPicker();

alert("card: " + pickedCard.card + " of " + pickedCard.suit);

　　你的答案是什么？

　　答案是报错！这时因为deck.createCardPicker()返回一个函数赋值给cardPicker，而cardPicker是以函数式的方式调用的，所以this指向window。之所以这样是因为在JavaScript中this是在被调用时确定的，而在TypeScript中可以将this设置为在函数定义时就确定，方法就是把函数表达式变为使用lambda表达式（ () => {} ）

let deck = {

    suits: ["hearts", "spades", "clubs", "diamonds"],

    cards: Array(52),

    createCardPicker: function() {

        // NOTE: the line below is now an arrow function, allowing us to capture 'this' right here

        return () => {

            let pickedCard = Math.floor(Math.random() * 52);

            let pickedSuit = Math.floor(pickedCard / 13);

            return {suit: this.suits[pickedSuit], card: pickedCard % 13};

        }

    }

}

let cardPicker = deck.createCardPicker();

let pickedCard = cardPicker();

alert("card: " + pickedCard.card + " of " + pickedCard.suit);

　　这样就没有问题了

参考资料:

　　　TypeScript Handbook（中文版）

秒客网