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（中文版）