转载

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