TypeScript --函数（二）

一、函数重载

使用场景：函数根据传入不同的参数而返回不同类型的数据

实现方式：为同一个函数提供多个函数类型定义来进行函数重载

类型检查的时候会按照顺序查找重载列表，如果匹配就使用这个，因此在定义重载的时候，一定要把最精确的定义放在最前面

示例如下：

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

二、this参数

若编译器设置了--noImplicitThis标记（显示定义this类型）， 需要指定this参数类型， 否则ts会抛警告

this参数是个假的参数，它出现在参数列表的最前面

this参数在回调函数中使用，指定的类型须是 this:void

指定类型this:void，函数中是不能再使用this

解决上述问题，可以使用箭头函数，箭头函数不会捕获this的，可以把它们传给期望this: void的函数

示例如下：

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


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

// ===========
class Handler {
    info: string;
    onClickBad(this: Handler, e: Event) {
        // oops, used this here. using this callback would crash at runtime
        this.info = e.message;
    }
}
let h = new Handler();
uiElement.addClickListener(h.onClickBad); // error!

class Handler {
    info: string;
    onClickGood(this: void, e: Event) {
        // can't use this here because it's of type void!
        console.log('clicked!');
    }
}
let h = new Handler();
uiElement.addClickListener(h.onClickGood);


// =========
class Handler {
    info: string;
    onClickGood = (e: Event) => { this.info = e.message }
}