What is the generic type that can be used for the arguments in

One function I've been working on is called time

const time = <T>(fn: (...args: any[]) => Promise<T>, ...args: any[]): Promise<T> => {
  return new Promise(async (resolve, reject) => {
    const timer = setTimeout(() => reject(`Error: ${fn.name} timed out`), ms)
    try {
      resolve(await fn.bind(thisArg)(...args))
    } catch(err) {
      reject(err)
    } finally {
      clearTimeout(timer)
    }
  })
}

I'm exploring ways to avoid using the type any for the arguments in ...args. My goal is to connect the argument types of ...args in the fn function signature (

fn: (...args: any[]) => Promise<T>
) with the argument types of ...args in the time function. These should ideally be linked by a generic type. Initially, I considered:

const time = <T, U>(fn: (...args: U[]) => Promise<T>, ...args: U[]): Promise<T>

However, this approach seems flawed as not all arguments will have the same type. Instead, whatever type is assigned to ...args in the fn function's signature should also apply to the second parameter ...args in the time function.

Answer №1

One possible solution is:

const time = <T, U extends unknown[]>(fn: (...args: U) => Promise<T>, ...args: U): Promise<T>

Playground Link

Each argument may vary in type.

The ...args type must be an array/tuple because of the rest operator it uses.

Rather than specifying as U[], which mandates each argument to be of type U, it is more efficient to specify the entire array with a generic constrained to be an array: U extends unknown[], allowing us to use ...args: U

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

Utilizing Typescript to Inject Generics and Retrieve the Name of an ES6 Module

I am currently working on developing a versatile repository using: Typescript ES6 Angular 1.x However, I am facing challenges in determining the correct way to inject the Entity and retrieve its module name. The main reason for needing the name: I adh ...

The error message "Unable to access property MyToast.java as it is not

I've been diligently following this tutorial on how to write Java code in NativeScript and use it directly in TypeScript. But, unfortunately, I encountered an error message stating: Cannot read property 'MyToast' of undefined app.component ...

What is the best way to display a Lit Element Web component within a Typescript Express application?

After creating a Typescript Express Server, I have the following files: src/server.ts import express from "express"; import { HomeController } from "./controllers"; const app: express.Application = express(); const port: number = ((proc ...

Unlock the power of asynchronous dependencies on a global scale with Inversify

I'm looking to resolve an asynchronous dependency at the top level without relying on top-level awaits. Currently, I've implemented a temporary solution by defining an asynchronous function getService() in the controller file. However, this appr ...

Why am I receiving a peculiar type error with @types/jsonwebtoken version 7.2.1?

My current setup includes node v6.10.3, typescript v2.3.4, and jsonwebtoken v7.4.1. Everything was running smoothly until I decided to upgrade from @types/jsonwebtoken v7.2.0 to @types/jsonwebtoken v7.2.1. However, after this update, an error started poppi ...

Tips for center-aligning layouts in Angular Material

I am struggling with the Angular Material flex layout, so I took this directly from the Angular Material website. Based on the documentation for layout container, items are arranged in a row with a max-height of 100% and max-width matching the width of th ...

What events can cause all store states to be loaded when the page is altered?

I am currently utilizing ngrx/store, ngrx/effects, and ngrx/router. The implementation of my effects is structured as follows: @Effect() loadOneProduct$ = this.updates$ .whenAction(LOAD_ONE_PRODUCT) .switchMap(() => this.productService.loadOn ...

Troubleshooting Image Upload Problem with Angular, Node.js, Express, and Multer

While trying to implement the functionality of uploading an image, I have been referencing various guides like how to upload image file and display using express nodejs and NodeJS Multer is not working. However, I am facing issues with getting the image to ...

Assign the primeng dropdown's value to the model in a reactive form

I am currently encountering an issue while populating a form that contains several PrimeNg dropdowns. To simplify, let's consider an example similar to the ones provided on their website. <form [formGroup]="myFormGroup"> <p-dropdown [optio ...

Circular reference in Angular/TypeScript

I encountered a circular dependency issue in my Angular project and tried various solutions, including exporting all dependent classes from a "single file" as suggested here. Unfortunately, this approach did not work for me. I then explored other solutions ...

retrieving necessary components from sdk_aws

When I updated my project, I encountered the following error while trying to execute the ng serve command: ERROR in node_modules/aws-sdk/clients/s3.d.ts(12,24): error TS2307: Cannot find module 'stream'. node_modules/aws-sdk/clients/s3.d.ts(908,2 ...

The upcoming developer manages to execute the program successfully, however, it continues to load indefinitely

Executing the command yarn dev consistently runs successfully in my VS Code terminal: $ yarn dev yarn run v1.22.19 warning ..\..\..\..\package.json: No license field $ next dev ready - started server on 0.0.0.0:3000, url: http://localho ...

Invoke the dispatch function from React-Redux in a stateless component with the help of a wrapper

I have a React-Redux store that is wrapped in a next-redux-wrapper. I am facing an issue where I cannot dispatch a function outside of a react component due to the wrapper. Is there a way to import the store and use dispatch while still using the wrapper? ...

Compiling TypeScript files for Angular 2 with Atom can be quite time-consuming

Currently, I am utilizing Angular 2 RC-6 by referencing the Angular2 Documentation. However, I have encountered an issue with Atom being too slow to compile my '.ts' files. Interestingly, when I relocate my tsconfig.json file from the root folder ...

Creating a unique Nest.js custom decorator to extract parameters directly from the request object

I am working with a custom decorator called Param, where I have a console.log that runs once. How can I modify it to return a fresh value of id on each request similar to what is done in nestjs? @Get('/:id') async findUser ( @Param() id: stri ...

Issue with TypeScript when calling the jQuery getJSON() method

Currently, I am working with TypeScript version 1.7.5 and the latest jQuery type definition available. However, when I attempt to make a call to $.getJSON(), it results in an error message stating "error TS2346: Supplied parameters do not match any signatu ...

Guide on linking action observables to emit values in sync before emitting a final value

If you're familiar with Redux-Observable, I have a method that accepts an observable as input and returns another observable with the following type signature: function (action$: Observable<Action>): Observable<Action>; When this method r ...

Utilizing a variable name as an object key in TypeScript

Can this be achieved? static readonly statusMapping: { [key in UploadStatus]: PopupMessageStatus } = { UploadStatus.COMPLETED : PopupMessageStatus.COMPLETED } UploadStatus is an enum with numeric values, where UploadStatus.COMPLETED = 0 p ...

What is the best approach in Typescript to ensure type understanding when importing using require()?

Currently, I am working with TypeScript within IntelliJ. Let's say I have the following code: const functions = require('firebase-functions'); Then I proceed to use it in this manner: exports.doSomething = functions.https.onCall((data, c ...

Passing data and events between components in React

I'm currently working on developing a dashboard app that includes a basic AppBar and a drawer. I based my design on this Demo. https://codesandbox.io/s/nj3u0q?file=/demo.tsx In the Demo, the AppBar, Drawer, and Main content are all contained within ...