two fat arrows in one type alias of typescript

two fat arrows in one type alias of typescript

Here comes a type alias definition in typescript:

export type HandleError =  <T> (operation?: string, result?: T) =>          (error: HttpErrorResponse) => Observable<T>;

What does the type alias HandleError mean?

What we usually see is type alias definitions with just one fat arrow like

type x = () => void;  //defines x as a function alias and the function returns void.

type Name = string;
type NameResolver = () => string; ////defines NameResolver as a function alias and the function returns string.
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
    if (typeof n === "string") {
        return n;
    }
    else {
        return n();
    }
} 

=> means it is a function and the expression after => means the type of return value.

As a result, the former HandleError type alias can be modified as below:

export type HandleError =  <T> (operation?: string, result?: T) =>          (   (error: HttpErrorResponse) => Observable<T>    );

Notice that I added a parenthesis intentionally for better understanding of the definition.

Here we can say type HandleError is a function alias and the function returns type (error: HttpErrorResponse) => Observable<T>.

The following code shows how HandleError alias is used.

  createHandleError = (serviceName = ''): HandleError =>
    (<T>(operation = 'operation', result = {} as T) => this.handleError(serviceName, operation, result))

  handleError<T> (serviceName = '', operation = 'operation', result = {} as T): (error: HttpErrorResponse) => Observable<T> {

    return (response: HttpErrorResponse): Observable<T> => {
     
      console.error(response);

      // Show a simple alert if error
      const message = (response.error instanceof ErrorEvent) ?
        response.error.message :
       `server returned code ${response.status} with body "${response.error.error}"`;

      alert(message);

      // Keep running and returning a safe result.
      return of( result );
    };

  }

And the following is how ErrorHandlerService is injected in other business logic services:

export class BuildersService {
  private readonly apiUrl = environment.apiUrl;
  private buildersUrl = this.apiUrl + '/builders';
  private handleError: HandleError;

  constructor(
    private http: HttpClient,
    httpErrorHandler: HttpErrorHandler ) {
      this.handleError = httpErrorHandler.createHandleError('BuildersService');
     }

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.