一. 函数基础

完整的函数声明如下:
(x:number, y:number) => number 是类型声明
function(x: number, y: number): number { return x + y; }; 是值声明
意思是: 值声明需要符合类型声明中的要求,存在2个number类型的参数,并返回number类型的函数.

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

1. 可选参数和默认参数

(1) ts中函数入参必须和函数期望的参数个数相同
(2) 可选参数在参数名后加 '?'标识,可选参数必须放在参数最后
(3) 默认参数的作用就是可选参数,而且可以放在参数的前面,但是可选参数就不能放在参数的前面

// 可选参数
function buildName(firstName: string, lastName?: string) {
    // ...
}

// 默认参数
function buildName(firstName: string, lastName = "Smith") {
    // ...
}

2. 剩余参数

在JavaScript中剩余参数使用arguments,在typescript中剩余参数会被放入一个变量中,使用es6的解构语法

function buildName(firstName: string, ...restOfName: string[]) {
  return firstName + " " + restOfName.join(" ");
}

二. this

1. JavaScript中的this问题是只有当函数调用的时候,才能确定函数中的this是什么,这就会造成this指向混乱.如下例子:

例子中,deck对象中createCardPicker函数返回一个函数,这个函数在什么环境下执行不可预知,当环境中是window时,this就会指向window,而不是期望的deck对象.
所以改进的方法是将deck对象中createCardPicker函数返回的函数用箭头函数,es6中箭头函数中的this是定义处的环境,在何处调用没影响.

JavaScript典型的this问题

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

JavaScript使用es6箭头函数改进版

let deck = {
    suits: ["hearts", "spades", "clubs", "diamonds"],
    cards: Array(52),
    createCardPicker: function() {
        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);

2. this参数

this是个假参数,表明函数应该在this指定的环境下调用

function f(this: void) {
    // make sure `this` is unusable in this standalone function
}

下面例子是说明deck的createCardPicker函数应该在Deck对象上调用

interface Card {
    suit: string;
    card: number;
}
interface Deck {
    suits: string[];
    cards: number[];
    createCardPicker(this: Deck): () => Card;
}
let deck: Deck = {
    suits: ["hearts", "spades", "clubs", "diamonds"],
    cards: Array(52),
    // NOTE: The function now explicitly specifies that its callee must be of type Deck
    createCardPicker: function(this: Deck) {
        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);

三. 重载

重载在java中是一个类中的同一个方法,名字相同,签名不同
重载在typescript中,是同一个方法名字相同,参数个数,类型不同等不同,主要目的是规避JavaScript中传入不同的值就返回不同的值的随意性.将调用方法限定为特定几种传参方式:
(1) 下例中将pickCard限定为只能传入对象数组返回数字和传入数字返回对象2中调用方式,其他调用会报错
(2) 下例中function pickCard(x): any {...}不算函数重载列表的一部分

let 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") {
        let pickedCard = Math.floor(Math.random() * x.length);
        return pickedCard;
    }
    // Otherwise just let them pick the card
    else if (typeof x == "number") {
        let pickedSuit = Math.floor(x / 13);
        return { suit: suits[pickedSuit], card: x % 13 };
    }
}

let myDeck = [{ suit: "diamonds", card: 2 }, { suit: "spades", card: 10 }, { suit: "hearts", card: 4 }];
let pickedCard1 = myDeck[pickCard(myDeck)];
alert("card: " + pickedCard1.card + " of " + pickedCard1.suit);

let pickedCard2 = pickCard(15);
alert("card: " + pickedCard2.card + " of " + pickedCard2.suit);

typescript学习-泛型
https://www.jianshu.com/p/b0753d2e9187

typescript学习-函数