Typescript error: An outer value of 'this' is shadowed by this container

Question

I had an error in a Typescript class method declaration, but I don\'t understand how the error message relates back to the bug.

The message seems to be saying that \'th

Answer 1

In TypeScript (and ES6) exists two kinds of functions: The classic function declaration and the arrow function. Where the classic function declaration has the default floating binding logic for the this keyword - the arrow function will constantly use the value for this of the context containing the arrow function. In the example this will be the instance of the surrounding class.

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; 
  };
};