TypeScript, functions and this

This week I just had a challenging moment and I want to share my little TypeScript learning with you (probably you know about this already -a pun lol-, but who knows).

I had this piece of code

const someFn = !!this.someData ?
    this.service.doSomething :
    this.service.doSomethingElse;

with which I wanted to trigger the right function according to the presence of someData.

Funny thing: if you used someFn(someArgument) it would fail with this is undefined.

This error happens because the this.service scope disappears as soon as you call the function.

So I thought: .bind(this.service) to the rescue!

const someFn = (!!this.someData ?
    this.service.doSomething :
    this.service.doSomethingElse).bind(this.service);

Naturally not...

Now the type system of TypeScript is in the way, because bind is a bit of a wild card in terms of types and it makes the type check complain (to solve that I would need to define the type explicitly... a bit ugly).

So I ended up settling for:

const someFn = someArgument =>
  (!!this.someData ?
    this.service.doSomething(someArgument) :
    this.service.doSomethingElse(someArgument));

This works because ES6 anonymous functions keep scope intact.

Hopefully this functional pill of TypeScript will save you some head scratching.