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
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
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);
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.