'this' context of type 'void' is not assignable to method's 'this' of type '***'

[asurance]

TypeScript Version: 3.4.0-dev.201xxxxx

Search Terms:

Code

class a{
    test() {
        t();
        function t(this: a) {
            
        }
    }
}
class b{
    test(this:b) {
        t();
        function t(this: b) {
            
        }
    }
}

Expected behavior:
No Error
Actual behavior:
'this' context of type 'void' is not assignable to method's 'this' of type '***' when call funtion t
Playground Link:
http://www.typescriptlang.org/play/index.html#src=class%20a%7B%0D%0A%20%20%20%20test()%20%7B%0D%0A%20%20%20%20%20%20%20%20t()%3B%0D%0A%20%20%20%20%20%20%20%20function%20t(this%3A%20a)%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%7D%0D%0A%7D%0D%0Aclass%20b%7B%0D%0A%20%20%20%20test(this%3Ab)%20%7B%0D%0A%20%20%20%20%20%20%20%20t()%3B%0D%0A%20%20%20%20%20%20%20%20function%20t(this%3A%20b)%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%7D%0D%0A%7D
Related Issues:

[RyanCavanaugh]

Your code has an error because this.test() inside function t will throw.

[asurance]

Your code has an error because this.test() inside function t will throw.

So what's the problem?

class a{
    test() {
        console.log('test');
        t();
        function t(this: a) {
            console.log('hello')
        }
    }
}
let t = new a();
t.test();

if I ignore the error and run the code below(which displayed on the right of playground),I will get the output I expect.

var a = /** @class */ (function () {
    function a() {
    }
    a.prototype.test = function () {
        console.log('test');
        t();
        function t() {
            console.log('hello');
        }
    };
    return a;
}());
var t = new a();
t.test();

PlaygroundLink:

http://www.typescriptlang.org/play/index.html#src=class%20a%7B%0D%0A%20%20%20%20test()%20%7B%0D%0A%20%20%20%20%20%20%20%20console.log('test')%3B%0D%0A%20%20%20%20%20%20%20%20t()%3B%0D%0A%20%20%20%20%20%20%20%20function%20t(this%3A%20a)%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20console.log('hello')%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%7D%0D%0A%7D%0D%0Alet%20t%20%3D%20new%20a()%3B%0D%0At.test()%3B

[julian-sf]

@RyanCavanaugh Are you sure this is working as intended? The first example wasn't that great, but the second one is definitely more clear.

Your code has an error because this.test() inside function t will throw.

I think you need to expound on that, as I don't see it throwing any errors in the playground:

http://www.typescriptlang.org/play/index.html#code/MYGwhgzhAEYN4FgBQ1XQC4FMLoBQEppEU1S98BuZU0gMwFcA7YdASwHtGNd0ALViAC5YhYjXHRgnCOxCYAdCHYBzXAHIwaytQkBfHan1IjoSDABGYtFhw9+Q86IM1yVEuIbM2nbnwHDHImcJSWlZBSVVNXMtNxCjUiMjZClGHGgAQWgAXmhGTAB3WAI3DPkbcmQU6XRoACEcvMLocxLkOvLsciA

[julian-sf]

Actually, I think I see why this isn't an issue, although I don't see the code throwing an error.

Anyway, the following code doesn't work because the function t isn't bound to anything when invoked. If you run the following code:

class A {
    test(this: A) {
        console.log(this)
        t();
        function t(this: A) {
            console.log('in t with');
            console.log(this)
        }
    }
}

const a = new A();
a.test();

You get the following output:

If you change the t(); call to t.call(this); then it works as expected and TS doesn't complain:

Basically TS is saying "HEY, I'm noticing you're trying to invoke a function that has a this signature of A but you're bound to undefined". So TS IS working as intended here.

[rouzwelt]

@julian-sf your answer really was great and helped me alot, clarified everything for me that how I was missing the bound for my functions. thank you

[mykohsu]

I think there's still room for confusion here.

class C {
  notZ = true;
  constructor() {
    handle(this, () => this.handler());
    handle(this, this.handler);
  }
  handler() {
    console.log(`C ${this instanceof C}`);
  }
}
function handle(c: C, handler: (this: C) => void) {
  handler(); // This fails with the error on the subject
  handler.apply(c);
}

class Z {
  constructor() {
    badHandle(() => this.handler()); // This doesn't fail as expected
    badHandle(() => this.handler() as ((this: Z) => void)); // This fails as expected
    badHandle(this.handler); // This doesn't fail as I expected, but at least it can be re-bound
  }
  handler() {
    console.log(`Z ${this instanceof Z}`);
  }
}

function badHandle(handler: (this: C) => void) {
  const q = handler.bind(new C());
  q();
  handler.call(new C());
}

Calling new Z() logs both Z true and Z false, because the arrow function cannot be re-bound.

At first I thought handler: (this: C) => void meant that only a bound function can be passed, but it actually allows unbound functions as well and just means handler can't be called without a scope being provided.

And, badHandle(() => this.handler()); shouldn't be allowed but it is because TS treats this as () => void when it should be able to know that this is (this: Z) => void. badHandle(() => this.handler() as ((this: Z) => void)); errors as expected.