TypeScript Arrow Functions Names Issue (Angular 4)

Currently using TypeScript 2.3.3 with Angular 4.2.4.

I've created a service, doing a simple promise, then (success, failure), into another then / catch in the calling function.

and i was surprised to learn that TypeScript, (unlike ES6 definition), still doesn't name arrow functions. That simply means that whenever you create a function like this

"(args or not) => { //code }"

you can't ever give it a name, and it will always stay as an anonymous function, mainly meaning that in an error when you would like to see the call stack you'll get

and this is a wrong practice, you should ALWAYS name your functions just for that purpose.

the issues can be seen in StackOverflow and GitHub Typescript issue #6433

solution would be to actually use the function keyword everywhere.

in a class these 2 gets into the prototype and do not appear in the call stack at all:

Get(url) { console.error('Get'); };
Get(url) : void { console.error('Get'); };

these 2 declarations in a class will create a function as prop (this) but will have their name in the stack (o.c. the 1st you should use when you want to type your parameters

Get:(url) => void = function GetNamedInStack(url) { console.error('Get'); };
Get = function GetNamedInStack(url) { console.error('Get'); };

and using this vs prototype should not have a big impact unless you're doing some ultra prototype ninja code.

another important note is that the let keyword also causes anonymous in the stack, so use var instead.

//anon in stack
let promise = new Promise((resolve, reject) => {

//no anon in stack
var promise = new Promise ((resolve, reject) => {

Good Luck!


Popular posts from this blog

Asp.Net Ending Response options, Response.End() vs CompleteRequest()

c# Service Play Sound with NAudio example by Moshe

MatDatePicker Errors