Typescript错误：外部值为'；这'；被这个容器遮蔽了

我在一个Typescript类方法声明中有一个错误，但我不明白错误消息是如何与bug联系起来的

消息似乎在说“this”的类型是

any

，但我们在一个类定义中，所以我认为“this”是非常清楚的

有人能解释一下错误信息与bug的关系吗

原始方法：

calcSize = function() {
    return this.width * this.length; // Error on this line
};

// Error text: 'this' implicitly has type 'any' because it does not 
//have a type annotation.ts(2683)
//app.ts(39, 16): An outer value of 'this' is shadowed by this container.

修正：

完整上下文（固定）：

在TypeScript（和ES6）中存在两种函数：经典的函数声明和箭头函数。如果经典函数声明具有

this

关键字的默认浮动绑定逻辑，则箭头函数将持续使用包含箭头函数的上下文的

this

的值。在本例中，这将是周围类的实例

class Rectangle extends BaseObject {
// ..
  calcSize = function() {
    // the keyword function will cause this to be floating
    // since the function is explicitly assigned to calcSize
    // (older) TypeScript may not infer the type of this.
    // the value of this can be re-bind by changing the context
    // using bind or call
    // -> Value of this defaults to the class instance
    return this.width * this.length; // (potential) type Error on this line
  };
  calcSizeAsMember () {
    // is also a classic function which will use floating binding
    // therefore this will be the type of the containing class
    // the value of this can be re-bind by changing the context
    // using bind or call
    // -> Value of this defaults to the class instance
    return this.width * this.length; 
  };
  calcSizeAsArrowFunction = () => {
    // is an arrow function which has a constantly bind this keyword, 
    // it is not possible to change the binding afterwords (not re-binding)
    // type of this is constantly the type of the containing class
    // changing the context, use bind or call will have no effect
    // -> this will always remain to the instance of the class
    return this.width * this.length; 
  };
};

---

在设置超时时使用箭头功能执行此操作

setTimeout(() => {
  yourFunction()
}, 3000);

---

重要的是要指出，标准方法声明没有绑定到类实例-例如，如果您获取对它的引用并调用它

，那么这将是全局上下文<代码>let ref=rect.calcSizeAsMember；ref（）

。在使用异步代码时，这可能是一个常见的问题。谢谢您的提示。我已经修好了。我总是想相反的事情。经典的“函数”不会重新绑定，这意味着它在调用时将使用任何“this”，您可以认为它们几乎是“浮动的”。其中，arrow（）=>函数将重新绑定，并在调用时始终使用相同的“this”。arrow函数相当于：function（）{…}.bind（someThis）感谢您指出这一点。你说得对，这就是我想说的。我把我的帖子编辑得更具体一些。

class Rectangle extends BaseObject {
// ..
  calcSize = function() {
    // the keyword function will cause this to be floating
    // since the function is explicitly assigned to calcSize
    // (older) TypeScript may not infer the type of this.
    // the value of this can be re-bind by changing the context
    // using bind or call
    // -> Value of this defaults to the class instance
    return this.width * this.length; // (potential) type Error on this line
  };
  calcSizeAsMember () {
    // is also a classic function which will use floating binding
    // therefore this will be the type of the containing class
    // the value of this can be re-bind by changing the context
    // using bind or call
    // -> Value of this defaults to the class instance
    return this.width * this.length; 
  };
  calcSizeAsArrowFunction = () => {
    // is an arrow function which has a constantly bind this keyword, 
    // it is not possible to change the binding afterwords (not re-binding)
    // type of this is constantly the type of the containing class
    // changing the context, use bind or call will have no effect
    // -> this will always remain to the instance of the class
    return this.width * this.length; 
  };
};

setTimeout(() => {
  yourFunction()
}, 3000);