Is it possible to transmit an argument to a function without using parentheses?

I am currently working with the following code snippet:

this.somePromiseFn<T>  // this function is actually a promise
.then(res => res as T)
.catch(err => this.handleError<T>(err));

handleError<T>(err: HttpErrorResponse) {
  // perform actions here
  // and return something like
  return {} as T;
}

The code above functions correctly. However, I am trying to figure out how to directly pass the err argument to the handleError method without using an additional callback function. Since the catch block inherently passes the err to the callback function, it should also pass it to the handleCatchError. My desired implementation looks like:

this.somePromiseFn<T>
.then(res => res as T)
.catch(this.handleCatchError<T>); // this line results in error 'An argument for 'err' was not provided'

However, upon running the above code, the following error message is displayed:

Expected 1 argument, but received 0.
An argument for 'err' was not provided.

Despite reviewing the following related questions:

  1. addEventListener calls the function without me even asking it to
  2. Javascript "addEventListener" Event Fires on Page Load

These references also recommend using an additional callback function.

Answer №1

When calling this.somePromiseFn, the following steps are taken:
1. The promise is resolved with the result casted as type T using .then().
2. If there is an error, it is caught and handled by this.handleCatchError.

This functionality has been tested and appears to be working fine. A demo can be viewed <a href="https://stackblitz.com/edit/skdroid-promise-cb" rel="nofollow noreferrer">here</a>. Please review and make any necessary updates.

this should work, tried to reproduce the error but it's working see a demo, might be I'm missing something, check and update if necessary.

Answer №2

After reviewing the stackblitz example you shared, take a look at

this.someFn().then(response => console.log(response)).catch(error => this.handleError<any>(error));

Answer №3

Avoid providing generated type and attaching "this":

this.somePromiseFunction<T>
    .then(result => result as T)
    .catch(this.handleCatchError.bind(this));

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

No data found on Angular TypeScript page with an empty array

Incorporated a function called 'getQuestionsWithInterviewId' to populate my 'Questions' string, but it appears empty when I attempt to call it within the ngOnInit and ngAfterContentInit methods and log the result in the console. import ...

Using Typescript does not generate any errors when indexing an object with brackets

One interesting thing I've noticed about TypeScript is that it allows me to use bracket notation to access an object via index, even when it only has keys. For example: interface testObject { name: string; id: number; } let first: testObject ...

Using React Router's useHistory hook, you can change the URL without triggering a component reload

I am looking to create a simple button that, when clicked, redirects a user to a specific route that I have defined in my Index.tsx file. After clicking the button, the URL bar correctly changes to "/dashboard", but the component (just an h1) does not app ...

Derive data type details from a string using template literals

Can a specific type be constructed directly from the provided string? I am interested in creating a type similar to the example below: type MyConfig<T> = { elements: T[]; onUpdate: (modified: GeneratedType<T>) => void; } const configur ...

Monitor the input value for any changes in Angular 8 using the listen component

Hey there! I'm currently working with a component that includes the input @Input() userId: number[] = []; to receive a list of user IDs. Specifically, I have integrated this component into another one, such as the news component: <kt-user-post-li ...

Setting up your Angular2-Typescript application to run smoothly in VS Code

I'm feeling quite lost here, could someone please help me make sense of this configuration? launch.json "configurations": [ { "name": "Launch", "type": "node", "request": "launch", "program": " ...

Guide on setting an instance property through a callback function triggered by the instance

I am looking to set an attribute of an angular service using the result from a callback function. Here is my Angular service: @Injectable() export class SkillsManagerService { private skill: any; private event: any; constructor() { ...

Combining various FormGroup types into a single object type in Angular 5

I am currently utilizing the mat-stepper feature from the Angular Material design library. Within my application, I am using 3 separate FormGroups to gather information and send it to a database using the httpClient method. To achieve this, I have defined ...

Angular2 Cache: Enhance Your Application's Performance

Currently seeking a cache solution for my Angular2 application. Imagine we have a massive collection of Movie objects stored on a server, too many to fetch all at once. The server offers a REST endpoint: getMovie(String id) On the client side, I need a s ...

It is necessary to sign out users when a specific database value is set to false

Whenever a value in the firebase database is false, I need to shut down the app for maintenance purposes. A problem arises when the user is already logged in, as the function does not trigger unless I reload the app. I am looking for a way to trigger the f ...

The issue of Angular child components rendering before receiving parent data

My current challenge involves a parent component (app.component) making an http request, storing the result in this.stats and then passing it as a prop to the child component (progression.component). The issue arises when my child component tries to render ...

Steps for sorting items from a list within the past 12 hours

I'm currently working with Angular and I have data in JSON format. My goal is to filter out items from the last 12 hours based on the "LastSeen" field of the data starting from the current date and time. This is a snippet of my data: { "Prod ...

Categories for the Promise.all() function

I'm feeling lost trying to understand the differences between the request tuple return type and Promise.all(). This is driving me crazy. Any suggestions? const createPromises = async (utteranceObject: Array<string[]>): Promise<Array<[s ...

Utilize NestJS to retrieve information from an observable gRPC service

One of the challenges I am facing is using gRPC service to facilitate communication between my microservices. Specifically, when receiving a response from the Grpc service, I need to apply some modifications and additional functionality before returning a ...

Storing information upon refresh in Angular 8

When it comes to inter-component communication in my Angular project, I am utilizing BehaviourSubject from RXJS. Currently, I have a setup with 3 components: Inquiry Form Where users enter an ID number to check for summon-related information. This data ...

What's the best way to display a component once a function has been executed?

My service controls the visibility of components using *ngIf! Currently, when I click a button, the service sets to true and the components appear instantly! I want the components to only show after a specific function has finished executing. This means I ...

Having trouble disabling an ESLint rule for ESLint, TypeScript, Vue, and WebPack Encore?

I've been delving into Webpack Encore and ESLint issues for quite some time now, but unfortunately, I haven't been able to find a solution to my problem. Specifically, I've been trying to change or disable certain TypeScript-ESLint rules, b ...

What could be causing this peculiar behavior in my React/TypeScript/MUI Dialog?

My React/TypeScript/MUI application has a dialog that displays multiple buttons. Each time a button is clicked, the dialog function adds the button value to a state array and removes it from the dialog. Although it seems to be working, there is an issue wh ...

Passing additional parameters to an Angular directive individually

Is there a way to pass two parameters separately to my directive instead of as one combined parameter? Currently, I am able to add the parameters as one parameter (*ovLoading="!isDataReceived;noBackground:true"), but I would prefer to have them as two sepa ...

What is the reason behind Typescript not narrowing generic union type components when they are eliminated by type guards?

Consider the following scenario where type definitions and function implementations are provided: interface WithNumber { foo: number; } interface WithString { bar: string; } type MyType = WithNumber | WithString; interface Parameter<C extends My ...