TypeScript学习-Functions

Optional and Default Parameters

• 如果默认参数被用作尾参数，那么它起的作用和尾参数是可选的作用是一样的：

function buildName(firstName: string, lastName?: string) {
    // ...
}
function buildName(firstName: string, lastName = "Smith") {
    // ...
}
(firstName: string, lastName?: string) => string

• 可选参数如果有，那么只能放在尾参数
• 默认参数位置任意，其类型由默认值决定，也就是说如果赋值了，那么值只能是设定的默认值的类型或者undefined

function buildName(firstName = "sss", lastName: string) {
    return firstName + " " + lastName;
}
let result3 = buildName(undefined | string , "ssss");
console.log(result3);

---

Rest Parameters

• ...用于无穷个可选参数，用于类型里面定义rest参数

function buildName(firstName: string, ...restOfName: string[]) {
    return firstName + " " + restOfName.join(" ");
}
let buildNameFun: (fname: string, ...rest: string[]) => string = buildName;

---

this

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();
//出错，this.suits[pickedSuit] this被绑定到了 window | undefined
alert("card: " + pickedCard.card + " of " + pickedCard.suit);

this和arrow function

• 通过使用arrow function绑定函数的上下文
• 可以通过执行加上--noImplicitThis来帮助提醒可能存在的绑定上下文错误

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

this parameter

• 然而，即使arrow function绑定了上下文,但是，this.suits[pickedSuit]的类型依然是any,因为this来源于对象字面量内部的函数表达式
• 所以TypeScript提供一个this parameter来修复这个bug

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

这样就修复了bug，TypeScript知道了this的类型是Deck，就没有any错误了

• this parameter in callbacks
  当函数作为参数传入一个一个库中的函数中的时候，这些库会把传入的函数当做普通的函数处理，因此这个函数捕获的this会变成undefined，所以在这个函数内涉及到this的会报错。
  通过以下几步解决错误，而且可以使用this
• 首先通过fake parameter this，确保传入的参数函数是不会捕获this，第一层检查。

interface UIElement {
    addClickListener(onclick: (this: void, e: Event) => void): void;
}

• 然后通过箭头函数来帮忙

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

以上可以会有缺点。那就是每次传建一个Handler类型的对象都会创建一个新的arrow function，造成浪费，解决办法是在Handler的原型上创建公用的方法

---

Overloads

JavaScript函数对于不同的参数可能返回不同类型的对象等等，所以需要如下措施来帮助做type-check

• 通过overloads和调用函数相同名字的函数组，来检查每一个可能产生的结果。

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