TypeScript基礎入門 - 函數 - this(二)

轉載

TypeScript基礎入門 - 函數 - this(二)

項目實踐倉庫

https://github.com/durban89/typescript_demo.git
tag: 1.2.3

爲了保證後面的學習演示須要安裝下ts-node，這樣後面的每一個操做都能直接運行看到輸出的結果。

npm install -D ts-node

後面本身在練習的時候能夠這樣使用

npx ts-node 腳本路徑

函數

this

學習如何在JavaScript里正確使用this就比如一場成年禮。 因爲TypeScript是JavaScript的超集，TypeScript程序員也須要弄清 this工做機制而且當有bug的時候可以找出錯誤所在。 幸運的是，TypeScript能通知你錯誤地使用了 this的地方。 若是你想了解JavaScript裏的 this是如何工做的，那麼首先閱讀Yehuda Katz寫的Understanding JavaScript Function Invocation and "this"。 Yehuda的文章詳細的闡述了 this的內部工做原理，所以這裏只作簡單介紹。

this參數

繼續上篇文章【TypeScript基礎入門 - 函數 - this(一)】

this.suits[pickedSuit]的類型依舊爲any。 這是由於 this來自對象字面量裏的函數表達式。 修改的方法是，提供一個顯式的 this參數。 this參數是個假的參數，它出如今參數列表的最前面，以下

function f(this: void) {
    // 確保`this`在這個獨立功能中沒法使用
}

咱們添加一些接口，Card 和 Deck，讓類型重用可以變得清晰簡單些，代碼以下

interface Card {
    suit: string;
    card: number;
}

interface Deck {
    suits: string[];
    cards: number[];
    createCardPicker(this: Deck): () => Card;
}

let deck: Deck = {
    suits: [
        'hearts',
        'spades',
        'clubs',
        'diamods'
    ],
    cards: Array(52),
    createCardPicker: function (this: Deck) {
        return () => {
            let pickedCard = Math.floor(Math.random() * 52);
            let pickedSuit = Math.floor(pickedCard / 13);

            return {
                suit: this.suits[pickedCard],
                card: pickedCard % 13,
            }
        }
    }

}

let cardPicker = deck.createCardPicker();
let pickedCard = cardPicker();
console.log("card: " + pickedCard.card + " of " + pickedCard.suit);

運行後獲得的結果相似以下

$ npx ts-node src/function_5.ts
card: 3 of diamods

如今TypeScript知道createCardPicker指望在某個Deck對象上調用。 也就是說 this是Deck類型的，而非any，所以--noImplicitThis不會報錯了。

本實例結束實踐項目地址

https://github.com/durban89/typescript_demo.git
tag: 1.2.4