Js中的this指向出错是开发中比较常见的错误，幸运的是，在typescript中使用this时，当出现错误它能够立即给你错误提示。
以官网的示例为例
let deck = {
suits: ['hearts', 'spades', 'clubs', 'diamonds'],
cards: Array(52),
createCardPicker() {
return function() {
let pickedCard = Math.floor(Math.random() * 52);
let pickedSuit = Math.floor(pickedCard / 13);
return { suit: this.suits[pickedSuit], card: pickedCard % 13 };
};
}
};
这里createCardPicker返回的匿名函数的this其实指向的是window（在严格模式下为undefined）。在typescript中，它会提示你this具有隐式类型any。所以，为了保证this的指向正确，可以将createCardPicker中的function更换成箭头函数。
let deck= {
// ...
createCardPicker() {
return () => {
// ...
return { suit: this.suits[pickedSuit], card: pickedCard % 13 };
};
}
};
我们，还可以在函数参数的第一个参数指定this属于哪一个对象下，指定this为固定的对象。
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),
createCardPicker(this: Deck) {
return () => {
let pickedCard = Math.floor(Math.random() * 52);
let pickedSuit = Math.floor(pickedCard / 13);
return { suit: this.suits[pickedSuit], card: pickedCard % 13 };
};
}
};
那么，这里的this确定是Deck对象并且也只能是Deck对象，当其他对象调用就会给出错误提示。
既然这样，我们还可以createCardPicker提出到外面成一个单独的函数。
function createCardPicker(this: Deck): () => Card {
return () => {
let pickedCard = Math.floor(Math.random() * 52);
let pickedSuit = Math.floor(pickedCard / 13);
return { suit: this.suits[pickedSuit], card: pickedCard % 13 };
};
}
let deck: Deck = {
suits: ['hearts', 'spades', 'clubs', 'diamonds'],
cards: Array(52),
createCardPicker
};
我们也可以将this声明为void，表示方法中不能使用this。
function createCardPicker(this: void) {
return () => {
// 报错: 类型“void”上不存在属性“name”。
this.name = 'leevare';
};
}
总结
在Typescript中，只能在function的第一个参数添加this约束，对this进行约束后，则表示只能在约束的对象上调用，否则将会出错。
如果觉得我的文章对您有用，请您随意打赏。您的支持将鼓励我更加努力创作！
如无特殊声明，文章均为原创，若有不正之处，万望告知。转载请附上原文地址，十分感谢！
说点什么