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');
}