What are some ways to leverage a promise-returning callback function?

Here is a function that I have:

export const paramsFactory = (params: paramsType) => {
  return ...
}

In a different component, the same function also contains await getPageInfo({ page: 1 }) after the return .... To make this work, I need to pass a callback as a second parameter to the function and then use it correctly. Here is what I have tried:

    export const paramsFactory = (params: paramsType, callback?: () => Promise<void>) => {
      return async (...) => { 
        ...
        if (callback) {
          await callback()
        }
      }
    }

The issue arises when trying to use await callback() as part of the return statement like

paramsFactory(params, getPageInfo({ page: 1 }))
. This results in an error message:

TS2345: Argument of type 'Promise' is not assignable to parameter of type '() => Promise'.   Type 'Promise' provides no match for the signature '(): Promise'.

Answer №1

implement

generateParams(params, () => fetchPageData({ pageNumber: 1 }))

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

Is it feasible to utilize the redirectTo function alongside the children parameter?

It's important to note that in the latest version of @angular/router 3.0.0-rc.1, you are unable to use the redirectTo parameter if you are also utilizing the children parameter. In some scenarios, such as my own, there may be a need for this function ...

Is there a way to reach the state in store/index.js without using export?

In my Vue store actions, I am utilizing Axios and looking to dynamically set an Axios header based on a specific state value (such as changing the request header for accepted languages). However, I encountered an issue when attempting to access the store o ...

How to Route in Angular 5 and Pass a String as a Parameter in the URL

I am currently working on an Angular project that focuses on geographic system data. The concept is as follows: I have a component with the route: {path: 'home'}. I aim to pass a geojson URL along with this route, making it look like this: {pat ...

The journey of communication: uncovering the essence of @input between parent and

I'm diving into Angular and currently working on the @Input phase. Within my main app, there's a child component. Inside app.component.ts, I've declared a test variable that I wish to pass from app.component.ts to child.component.ts. // ap ...

What is the best way to utilize JavaScript variables that are declared on index.html/index.jsp in Vue.js?

Just starting out with Vue.js and I recently finished developing a Vue.js app using the terminal. I then deployed it on a Java web application and noticed that everything works fine when running it as is. However, I now need to pass a csrftoken to my Vu ...

When using the `Document.write()` method, an error is returned stating, "Uncaught TypeError: Cannot read property 'document' of null"

I am currently integrating Angular2 into a website as the front-end framework, and it will be displayed on another website using an iframe. When working with the HTTP post method, I am able to receive a JSON response. Here is the API Post method that retu ...

Trouble encountered when integrating npm library with webpack

Recently, I set up a webpack project with vuejs using the template from https://github.com/vuejs-templates/webpack-simple. My intention was to integrate https://www.npmjs.com/package/bravia into my vue application by importing it with import Bravia from &a ...

"Encountering an error with the any type in the useLocation feature while using React Router version 6

https://i.sstatic.net/0YcS9.png What steps should I take to resolve this particular type of error issue? My attempt at passing a custom type did not yield successful results. ...

An issue has occurred with error code TS2688: The type definition file for 'jquery' cannot be located. [Angular Application] --

I am currently working on developing an Angular web application with a specific theme that requires the inclusion of CSS and JS files. Majority of the JS files needed are jquery plugins, so I made sure to install them using the following commands: npm i j ...

Tips for utilizing the patchValue method within a dynamic FormArray in Angular

When working with the first case (check out the DEMO link), patchValue() function can easily manipulate the select drop-down menu in a reactive FormGroup(), where only FormControl() is used. However, in the second case, I need to achieve the same functiona ...

As I refreshed the browser page, I encountered an error message from webpack about a connection issue

When I reload my Vue.js single page application on Firefox and Safari, I encountered the following error message in the console (or when submitting a form with post action): The connection with https://localhost:5000/dist/__ webpack_hmr was interrupted wh ...

How can I trigger a method after the user has finished selecting items in a v-autocomplete with multiple selection using Vuetify?

After multiple selections are made in a v-autocomplete, I need to trigger a method. However, the @input and @change events fire after each selection, not after the full batch of selections. Is there an event that triggers when the dropdown menu closes? Al ...

Styling in Angular 2: Leveraging StyleUrls and Custom Styles

I've encountered an issue where I can't use both styleUrls and styles in a Component (whichever is declared last takes precedence). What's the best way to work around this? I'd like to use the ./board.component.css file for base styles ...

Vue.js parent component sending new data: prop mutation detected

Encountering an issue in the console with the following error message: Instead, use a data or computed property based on the prop's value. Prop being mutated: "sortType" Within my root file, I have an API and filter function sending data to comp ...

Which property within the <mat-option> element is used for toggling checkboxes on and off?

I'm experimenting with dynamically checking/unchecking a checkbox in mat-option. What attribute can I use for this? I've successfully done the same thing with mat-checkbox using [(ngModel)]. Here's the snippet of my code: app.component.html ...

Tips for storing Vue3 OpenLayers coordinates in Django with SRID4326

Creating markers in OpenStreetMap is my current project. I have a building in Bangkok and when I use Django, the coordinates displayed are: "SRID=4326;MULTIPOINT (100.53007692708017 13.721325314629256)" I decided to create markers using Vue3. He ...

What is causing the warnings for a functional TypeScript multidimensional array?

I have an array of individuals stored in a nested associative array structure. Each individual is assigned to a specific location, and each location is associated with a particular timezone. Here is how I have defined my variables: interface AssociativeArr ...

Typescript classes implementing data hydration and dehydration techniques

Exploring ways to share TypeScript classes or interfaces between a React + TS frontend and node + TS backend. Converting class instances into JSON poses a challenge as TS types are removed during compile time. Considering options for defining objects in a ...

Deployment of a NextJS14 app to Vercel encountered an issue: Unexpected token '<' found in JSON at position 0

Here is the issue at hand: next: 14.1.4 next-auth: 4.24.7 node version: 20 This is the structure of my authentication folder: No errors occur when running npm run dev I've been investigating this issue for three days, but I am still stuck. I belie ...

Changing the value of a ref in Vue 3 within a function

I need to change the value of 'reset' from true to false when a file is uploaded. Even though 'reset' is externally set to true, it should be changed to false during file upload process. How can this be achieved? <template> rese ...