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-bound 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 () {
// This 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-bound by changing the context
// using bind or call.
// -> Value of "this" defaults to the class instance
return this.width * this.length;
};
calcSizeAsArrowFunction = () => {
// This is an arrow function which has a constantly-bound "this" keyword,
// it is not possible to re-bind afterward.
// The type of "this" is always the type of the containing class.
// Changing the context using bind or call will have no effect
// -> Value of "this" is always the class instance
return this.width * this.length;
};
};