Understanding Tour Of Heroes catchError implementation

Question

I'm trying to understand the implementation of catchError over an Http request in the Angular official tutorial (Tour Of Heroes).

The code of the http request is this:

this.http.get<Hero[]>(this.heroesUrl)
.pipe(catchError(this.handleError<Hero[]>('getHeroes', [])));

Inside the catchError, it passes the handleError function, which is implemented like this (summarized)

private handleError<T>(operation = 'operation', result?: T) {
  return (error: any): Observable<T> => {

    //Various operation with the error variable..

    return of(result as T);
  };
}

Since I'm new to TypeScript, I've tried to read documentation about this kind of syntax (and I've read also other questions about this piece of code), but I didn't find a reply: what does

return (error: any): Observable<T> => {

means? I don't understand how to read it: who valorize the error variable? How?

I read that catchError require a parameter that is a function with 2 parameters: err, which is the error, and caught, which is the source observable, but I don't see how error is valorized here. I supposed that in catchError I had to pass handleError(err, caught).

Jeff Bowman Jeff Bowman · Accepted Answer · 2019-04-26T01:05:25

handleError isn't the function you pass to catchError, handleError is the function you call so that it can return a function that you can pass to catchError. That makes it a higher-order function, making use of the fact that in Javascript and Typescript functions are first-class objects.

The returned function is an anonymous function in arrow notation, annotated with types. Without types, and with a better name, it may make more sense:

private getErrorHandler<T>(operation = 'operation', result?: T) {
  return (error) => {
    return of(result as T);
  };
}

The types merely say that the function returned by invoking handleError is a function that accepts an error and returns an Observable of type T.

I read that catchError require a parameter that is a function with 2 parameters: err, which is the error, and caught, which is the source observable

In Javascript, you can always supply more arguments than the function is expecting and the function will simply ignore the extras. The function that handleError returns presumably does not use the source Observable at all, so you can omit it in Javascript. Ostensibly Typescript doesn't allow extra arguments, and catchError definitely accepts a two-arg method, but because of Javascript's flexibility it allows you to cast a one-arg method into a two-arg method and discard the second parameter (see "Comparing two functions" in the Typescript Type Compatibility docs).

A different way of phrasing the same thing, using the function keyword instead:

private createFunctionForCatchError<T>(operation, result) {
  return function(error, unusedSourceObservable) {
    // Discard error and return an Observable of the result.
    return observableOf(result);
  };
}

Understanding Tour Of Heroes catchError implementation

1 Answers