TypeScript - Utilizing multiple parameters in a callback function

I am struggling with the code below:


function builder<T extends Foo>(
  getItems: (...) => Promise<T[]>, /* uncertain about what to include in the parentheses here */
) {
  return async (...): Promise<Baz> => { 
    const items = await getItems(...); /* not sure what parameters should go between the parentheses here */
    // some manipulation here
    return items;
}

My objective is to enable the builder function to accept an asynchronous callback that can handle different types of parameters. This callback could have one or multiple parameters passed into it.

For instance, I might use the builder function like this:

// call 1 
builder<SomeResult>((a, b) => someCallback(a, b));

// call 2
builder<AnotherResult>((c) => otherCallback(c)); 

Being new to TypeScript, I am unsure of how to achieve this. I believe exploring rest arguments might help, but I am unclear on how to approach the issue.

Any guidance on this matter would be greatly appreciated. Thank you for any assistance provided.

Answer №1

If you happen to search for this solution, I ultimately decided on :

function constructor<T extends Bar>(
  retrieveItems: (...additionalParams: any[]) => Promise<T[]>, 
) {
  return async (...additionalParams: any[]): Promise<Qux> => { 
    const items = await retrieveItems(...additionalParams); 
    // perform some actions here
    return items;
}

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

issue related to prototypejs event handlers and event triggering

Currently, I am in the process of learning both the prototype framework and javascript as a whole. My current task involves refactoring some existing code to generate HTML from data within a class by utilizing an event listener. Despite my efforts, I am en ...

What is the best way to add a new project and make updates to an existing project within an array?

Looking to add a new project and update existing projects within an array. Here's my plan in pseudo-JSON format. How can I update Project A in MongoDB? { _id : ..., userName: milad , projets : [ { .. projectId, pName, location .... A }, ...

using a ternary operator within the map function

Currently, I'm developing a web application that allows users to view a list of items and mark certain items as favorites. The favorites are stored in an array of IDs assigned to a prop (this.props.favorites). To ensure there are no duplicate entries, ...

(MUI Textfield) Error: Unable to access properties of undefined (specifically 'focus')

I have been working with the useRef hook in my Material Ui Textfield and have encountered the error Uncaught TypeError: Cannot read properties of undefined (reading 'focus'). I am unsure how to resolve this issue. Here is my current code snippet: ...

Improving Performance in Vue by Reducing `$set` Usage

Sharing my code snippet below <div v-for="namespace in chosenNamespaces" v-bind:key="namespace.id"> <!-- Select the Parameter --> <select @change="updateParameter($event, namespace.id)" v-model="currParameterValues[na ...

The Twilio client encounters resolution issues when incorporating it with Bun

There is a verification check function implemented as follows: async verifyWithOTP(phone: string, otp: string) { console.log({ phone, otp }); try { console.log("awaiting verification"); const verification = await client.verify.v2 ...

Tips for preventing a div from scrolling beyond the header with the use of position: sticky?

My header utilizes the CSS property position: sticky; to stick at the top of the page. However, this creates a gap between the header and the top of the page that I intentionally left there. As you scroll down, you can see the content div moving under and ...

Issue encountered while conducting tests with Jest and React Testing Library on a React component containing an SVG: the type is not recognized in React.jsx

In my Next.js 12.1.4 project, I am using Typescript, React Testing Library, and SVGR for importing icons like this: import ChevronLeftIcon from './chevron-left.svg' The issue arises when running a test on a component that includes an SVG import, ...

What techniques can be applied to utilize JSON data in order to dynamically create menu components using the map method?

My current challenge involves dynamically generating a set of menu items using data retrieved from a JSON file. I've attempted to achieve this by mapping the values with props, but it seems like I'm overlooking something. Below is the code snipp ...

Instructions on how to transfer a blob file to a server, save it, and then retrieve it back to the client side

Utilizing React.js on the client side and Node.js on the server side. I am uploading an image file using <input type="file"/>, which is then cropped immediately after upload. The resulting cropped image file is in blob format, such as blob:http://l ...

Hiding or showing a div in an Angular 6 component using a service-triggered function

After creating a service with a method that performs an action, the next step is to have this service interact with a specific component. service.ts: doSomething() { // Carries out a task here } In this case, the target component is described below: ...

Dynamic links with Node Acl

Utilizing the npm module Acl to establish an ACL system has been my current focus. You can check out the homepage of this module at: https://github.com/OptimalBits/node_acl. While the documentation provides straightforward examples for granting role acces ...

React js code to create a position ranking table

Currently, I am in the process of developing a web application using Reactjs with a ranking table managed by Firebase. However, I have encountered a question: Is it possible to dynamically change the position numbers after sorting the table based on the am ...

Issue with jQuery not retrieving clicked text values correctly

In my current project, I am using a PHP script to retrieve values from the database. The code snippet looks like this: <div class="col-md-4" > <?php $query = "SELECT * FROM product_categories"; $r ...

"Ensuring function outcomes with Typescript"Note: The concept of

I've created a class that includes two methods for generating and decoding jsonwebtokens. Here is a snippet of what the class looks like. interface IVerified { id: string email?: string data?: any } export default class TokenProvider implements ...

Creating multiple tables from a single set of JSON data

I've been working on dynamically creating an HTML table from JSON data. Successfully creating the table dynamically, but now I need to modify it based on new requirements. Current Progress I have an array of objects that I use to create the table a ...

What is the best way to handle constants in TypeScript?

I am facing an issue with a React component I have created: const myComponent = ({constant}: Iprops) => ( <div> {CONSTANTS[constant].property ? <showThis /> : null </div> ) The error message says 'element implicitly has ...

Is there a way to detect the completion of the fadeout animation before calling a function?

I am trying to create a toast message using jQuery. When the "show" class is appended to the div, I want the toast message to fade in and then fade out after a few seconds. Once the fade-out animation is complete, I need to remove the "show" class. This ...

Implementing Preloader: Combining NProgress.js with ember.js and utilizing ember data

While working on implementing the NProgress.js progress bar JQuery library with Ember.js to load data from the server, I successfully used JQuery post in Ember. However, I encountered difficulties in implementing it using Ember Data when loading data throu ...

Using Typescript to test with Karma, we can inject a service for our

I'm currently experiencing a problem with running tests in my application. I recently transitioned to using TypeScript and am still in the learning process. The specific error I'm encountering is: Error: [$injector:unpr] Unknown provider: movie ...