打字稿对象文字“this”关键字答案

【问题标题】：Typescript object literal "this" keyword打字稿对象文字“this”关键字
【发布时间】：2016-10-26 17:40:45
【问题描述】：

在对象字面量的函数内使用this 时的预期行为是什么？

例如，假设我有一个类型 foo，它只有一个名为 bar 的函数，并且没有其他属性。但是在fooObj.bar 方法中，我可以访问this.baz（其中baz 不是foo 类型的属性）我看不到任何错误。打字稿不应该出错，因为fooObj 上没有baz？

type foo = {
    bar(): void;
}
var fooObj: foo = {
    bar: () => {
        // TS does not error out when I access this.baz
        console.log(this.baz);
    }
}

【问题讨论】：

你试过设置"noImplicitThis":true编译器选项吗？

标签： javascript typescript this object-literal

【解决方案1】：

设置"noImplicitThis": true 编译器选项是您现在启用此功能的方式。 This pull request 启用在对象文字中键入 this。 Aleksey L 最初在对该问题的评论中建议使用此编译器选项，但当时它并没有这样运行。

【讨论】：

这是实际的解决方案。 noImplicitThis 使 this 关键字以您期望的方式工作，在对象文字中。

【解决方案2】：

您正在使用箭头函数，which has lexical this。

不过，对象字面量中非箭头函数属性的简写更短：

var fooObj: foo = {
    bar() {
        console.log(this.baz);
    }
}

【讨论】：

问题仍然存在：什么是baz，为什么 TypeScript 没有告诉你 foo（我认为应该是 this 的类型）没有 baz财产？我对 TypeScript 不是很了解，但是你的类型需要显式定义它们的属性不是重点吗？我想问题是，为什么 any 类型的 this 在词法绑定函数中，而不是 foo 类型？
@meagar: foo 不应该是 this 的类型。 this 将是 this 在包含对象文字的函数中的任何内容。
啊，是的。我掩盖了我们不在 ES6 类声明中的事实。那么，为什么 TypeScript 不查看对象字面量声明的上下文并看到 this 的任何类型仍然没有 baz 属性？
@meagar 因为this 是该代码中的全局范围，即any。
是的，我错过了使用箭头函数的微妙之处。但即使我尝试使用非箭头函数，“this”也会解析为“any”而不是 foo。这允许访问未在对象字面量中定义的属性。

【解决方案3】：

这个答案在提出问题时是正确的。此后，随着新版本的 typescript 和目标 javascript 版本的变化，这种情况发生了变化。

您要求 typescript 推断 this 是 fooObj。

Typescript 通过创建一个局部变量_this 来绑定this，该变量绑定到声明胖箭头的this-上下文。在您的情况下，this 是全局范围，即any。这是它被编译成的内容：

var _this = this;
var fooObj = {
    bar: function () {
        // TS does not error out when I access this.baz
        console.log(_this.baz);
    }
};

这是它在一个类中的样子：

class Bar
{
    private var = 23;
    public makeSound = () => console.log(this.var) 
}

// Compiles into:

var Bar = (function () {
    function Bar() {
        var _this = this;
        this.var = 23;
        this.makeSound = function () { return console.log(_this.var); };
    }
    return Bar;
}());

【讨论】：