How to declare types in a fat arrow promise chain?

Question

I'm quite new to TypeScript syntax. Working on existing code like this:

private checkUsername(username: FormControl): boolean {
  return this.userService
    .findUser(username.value)
    .catch(error => this.displayError(error));
}

the TypeScript linter warns that Parameter error is implicitly of type any. Fair enough, but when I try to add what I think looks like type declaration within the fat arrow:

.catch(error:any => this.displayError(error));

the linter warns that it expects a , in place of the :.

I can quell the error by wrapping the parameter and type declaration in parentheses:

.catch((error:any) => this.displayError(error));

Is this because it's expecting a shorthand parameter list with the former syntax (parentheses would therefore be mandatory when declaring type information in this way)?

(Neither What's the meaning of "=>" in TypeScript? (Fat Arrow) nor What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript? were particularly useful.)

This doesn't really have anything to do with promises, does it? I'm not sure why it has the tag or word in title... — Heretic Monkey, Sep 23 '16 at 16:04
@MikeMcCaughan As I have not done this before, I do not know for certain whether itor not it is related to it being in a promise chain. If it doesn't, that's useful information. Thanks. — msanford, Sep 23 '16 at 17:57

score 4 · Accepted Answer · answered Sep 23 '16 at 16:04

4

You can use either of these in TypeScript:

.catch(error => this.displayError(error));

or

.catch((error: any) => this.displayError(error));

This, however, is invalid:

.catch(error: any => this.displayError(error));

That's just the TypeScript syntax rules.

There is shorthand for what you are trying to do, though:

.catch(this.displayError);

Much simpler!

answered Sep 23 '16 at 16:04

James Monger

8,229
5
44
81

Of course, why didn't I think of that! I got into a mindset of adding types to everything, everywhere, even though they would clearly still be captured with the last method. – msanford Sep 23 '16 at 18:02
Note that shorthand is incomplete and will break if `displayError` refers to `this`. Then you need `.catch(this.displayError.bind(this))` – artem Sep 24 '16 at 03:55

Martin · Answer 2 · 2018-03-23T16:26:07.957

1

You have the correct syntax.

In ES6 these two arrow functions are equivalent, the same;

.catch(error => this.displayError(error));

and

.catch((error) => this.displayError(error));

The first one is a shorthand that is only allowed when you have exaclty ONE parameter.

With TypeScript, if you are adding a type decoration -- you must use the second form with parentheses.

edited Mar 23 '18 at 16:26

answered Sep 23 '16 at 16:01

Martin

13,809
3
43
52

Years later, I still spend half of my comments on Stack Overflow mentioning this to people. – msanford Mar 23 '18 at 16:21

score 1 · Answer 3 · answered Sep 23 '16 at 16:02

You do need to wrap the name:type pair in parens, otherwise the parser doesn't know what to do with it. This isn't terribly unusual, since arrow functions also require parens when they have more than one parameter or anything more complex than just foo => bar.

Since the foo : bar syntax can show up in a few other places (ternaries, object literals, and labels), this is especially important to disambiguate.

How to declare types in a fat arrow promise chain?

3 Answers3