TypeScript學(xué)習(xí)-Functions

Optional and Default Parameters

  • 如果默認(rèn)參數(shù)被用作尾參數(shù),那么它起的作用和尾參數(shù)是可選的作用是一樣的:
function buildName(firstName: string, lastName?: string) {
    // ...
}
function buildName(firstName: string, lastName = "Smith") {
    // ...
}
(firstName: string, lastName?: string) => string
  • 可選參數(shù)如果有,那么只能放在尾參數(shù)
  • 默認(rèn)參數(shù)位置任意,其類型由默認(rèn)值決定,也就是說如果賦值了,那么值只能是設(shè)定的默認(rèn)值的類型或者undefined
function buildName(firstName = "sss", lastName: string) {
    return firstName + " " + lastName;
}
let result3 = buildName(undefined | string , "ssss");
console.log(result3);

Rest Parameters

  • ...用于無窮個可選參數(shù),用于類型里面定義rest參數(shù)
function buildName(firstName: string, ...restOfName: string[]) {
    return firstName + " " + restOfName.join(" ");
}
let buildNameFun: (fname: string, ...rest: string[]) => string = buildName;

this

this是在函數(shù)調(diào)用時被設(shè)定的變量

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

thisarrow function

  • 通過使用arrow function綁定函數(shù)的上下文
  • 可以通過執(zhí)行加上--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來源于對象字面量內(nèi)部的函數(shù)表達(dá)式
  • 所以TypeScript提供一個this parameter來修復(fù)這個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);

這樣就修復(fù)了bug,TypeScript知道了this的類型是Deck,就沒有any錯誤了

  • this parameter in callbacks
    當(dāng)函數(shù)作為參數(shù)傳入一個一個庫中的函數(shù)中的時候,這些庫會把傳入的函數(shù)當(dāng)做普通的函數(shù)處理,因此這個函數(shù)捕獲的this會變成undefined,所以在這個函數(shù)內(nèi)涉及到this的會報錯。
    通過以下幾步解決錯誤,而且可以使用this
  • 首先通過fake parameter this,確保傳入的參數(shù)函數(shù)是不會捕獲this,第一層檢查。
interface UIElement {
    addClickListener(onclick: (this: void, e: Event) => void): void;
}
  • 然后通過箭頭函數(shù)來幫忙
class Handler {
    info: string;
    onClickGood = (e: Event) => { this.info = e.message }
}

以上可以會有缺點。那就是每次傳建一個Handler類型的對象都會創(chuàng)建一個新的arrow function,造成浪費(fèi),解決辦法是在Handler的原型上創(chuàng)建公用的方法


Overloads

JavaScript函數(shù)對于不同的參數(shù)可能返回不同類型的對象等等,所以需要如下措施來幫助做type-check

  • 通過overloads和調(diào)用函數(shù)相同名字的函數(shù)組,來檢查每一個可能產(chǎn)生的結(jié)果。
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);
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容