Determining parameter types for Window.setTimeout in TypeScript

In the lib.d.ts file, the types for Window.setTimeout are defined as:

declare function setTimeout(
  handler: TimerHandler, 
  timeout?: number, 
  ...arguments: any[]
): number;

I am interested in extending these types so that the arguments type is inferred from the handler rather than being an any[]

An example of the desired extension would be:

declare global {
  interface Window {
    setTimeout<THandler extends (...args: any[]) => any>(
      handler: THandler,
      timeout?: number,
      ...arguments: Parameters<THandler>
    ): number;
  }
}

This approach works but requires manual specification of the generic THandler type.

For instance:

declare function doSomething(value: number): number;

setTimeout(
  doSomething,
  100,
  'john', // no error is flagged by the compiler regarding this string argument
);

setTimeout<typeof doSomething>(
  doSomething,
  100,
  'john', // expected error is detected by the compiler
);

Is there a method to have setTimeout automatically infer the THandler argument based on the passed handler?

Answer №1

After reviewing the TypeScript Playground that I included as an update, it seems that the original function definition, which permitted ...any[], is interpreted as an overload and therefore remains permissible. It's only when you specifically define the generic that the added one is utilized.

For more extensive testing, here is an updated link: https://tsplay.dev/ABC123

I also had to adjust your code from unknown[] to any[] due to other errors. This change makes sense as 'unknown' indicates "I am unsure of this type, treat it as nothing for now," while 'any' signifies "I don't know the type, it could be anything, suspend type checking temporarily." The inclusion of extends refines the type once additional information is available.

declare global {
  interface Window {
    setTimeout<THandler extends (...args: any[]) => unknown>(
      handler: THandler,
      timeout?: number,
      ...arguments: Parameters<THandler>
    ): number;
  }
}

This snippet demonstrates TypeScript's type inference capabilities.

https://i.sstatic.net/2yZbx.png

It appears that removing an overload from an interface is not supported: https://github.com/Microsoft/TypeScript/issues/19064

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

What is the process for converting this example into a TypeScript class?

Currently in the process of developing an application using the H5P plug-in, I came across the need to create something for the H5P editor. This led me to discover this documentation on implementing a widget. /** * Module for Color selector widget * * @ ...

The unholy trinity of RxJS, Typescript, and the infamous 'Type Mismatch' error message

It's clear that I'm overlooking something obvious. The pseudo code below works perfectly in production, but my IDE (IntelliJ IDEA) is throwing an error that I can't solve. I can suppress it with noinspection TypeScriptValidateTypes, but I re ...

Mastering logging in Typescript: A comprehensive guide

I am encountering an issue where my TypeScript compiler is running out of memory and crashing. I would like to investigate what might be causing this. The official documentation mentions the following: --verbose boolean Enable verbose logging However, w ...

Having trouble transferring information between two components in Angular version 14

Having recently delved into the world of Angular, I'm grappling with the challenge of passing data from a parent component to a child component. On my product listing page, clicking on a product should route to the product detail page, but I can' ...

Using promises to communicate with an oracle database in nodejs

I've encountered an issue while attempting to run a block function in Oracle using Node.js. After 10 seconds, I receive no response and the following error message: UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Err ...

Is there a way to convert a typescript alias path to the Jest 'moduleNameMapper' when the alias is for a specific file?

I am currently working on setting up Jest in a TypeScript project. In our tsconfig.json file, we are using path aliases like so: "baseUrl": ".", "paths": { "@eddystone-shared/*": [ "../shared/*" ], "@eddystone-firebase-helpers/*": [ "src/helpers/fire ...

Optimizing the sorting of object properties based on specific values (numbers or strings)

My goal is to simplify the process of sorting both number and string values. The first step involves checking if the parameter I've passed (which belongs to the DeliveryDetailsColumns constants) matches another parameter from a different type (Electro ...

Guide on: Reloading an AngularJS Route

I'm in the process of setting up a Typescript SPA project using Visual Studio and AngularJS for routing. Here is my current configuration... var app = angular.module("myApp", ["ngRoute"]); app.config(($routeProvider, $locationProvider) => { $route ...

Obtaining a value from HTML and passing it to another component in Angular

I am facing an issue where I am trying to send a value from a web service to another component. The problem is that the value appears empty in the other component, even though I can see that the value is present when I use console.log() in the current comp ...

Is it possible to modify the content of an element with a click event in Angular/HTML?

How can I implement a feature in my mat-accordion using mat-expansion-panels where the text becomes underlined when the panels are clicked? I want the title to be underlined when the panels are open and for the underline to disappear when they are closed ...

Enhancing a Given Interface with TypeScript Generics

I am looking to implement generics in an Angular service so that users can input an array of any interface/class/type they desire, with the stipulation that the type must extend an interface provided by the service. It may sound complex, but here's a ...

When using a Redux action type with an optional payload property, TypeScript may raise complaints within the reducer

In my react-ts project, I define the following redux action type: type DataItem = { id: string country: string population: number } type DataAction = { type: string, payload?: DataItem } I included an optional payload property because there are tim ...

Ensure that the specified Class type must have a constructor with no arguments

When working with a function that takes a parameter representing a Class (not an object or instance, but the Class itself), or essentially a variable assigned to a Class. The challenge is ensuring that the Class assigned to the parameter has a constructor ...

The specified property 'slug' is not found within the designated type 'ParsedUrlQuery | undefined'

I am faced with an issue in my code where I am attempting to retrieve the path of my page within the getServerSideProps function. However, I have encountered a problem as the type of params is currently an object. How can I convert this object into a stri ...

What are the steps for integrating mongoDB with an angular2 application?

I currently have my angular2 & mongoDB setup successfully. While I've managed to read JSON files using the HTTP service, my goal is to create a fully functional application with database connectivity as well. I'm seeking advice on how to con ...

Gathering user key event input for a duration of 2 seconds before resetting it

I need help implementing a feature where I can clear the user's input text after 500ms if they are entering characters consecutively. private userInputTimer; private userInputText = ''; private handleEvent(event: KeyboardEvent): void { if ...

I attempted to implement a CSS and Typescript animation for a sliding effect, but unfortunately, it isn't functioning

So I'm encountering an issue with this unique ts code: {/* Mobile Menu */} <div className="lg:hidden"> <button className="flex items-center w-8" onClick={toggleMenu}> {isMobileMenuOpen ? ( ...

Elementary component placed in a single line

Creating a text dropdown menu using the following code: import { Autocomplete, TextField } from '@mui/material' import React, { useState } from 'react' const options = [ 'Never', 'Every Minute', 'Every 2 ...

Error: In Typescript, it is not possible to assign the type 'false' to type 'true'

Currently, I am exploring Angular 2 and encountered a situation where I set the variable isLoading to true initially, and then switch it to false after fetching required data. However, upon executing this process, I encountered the following error message: ...

The functionality of two-way data binding seems to be failing in Angular 2

I encountered an issue in my Angular 2 application where I attempted to bind view data using ngModel, but it did not function as expected. event.component.html <div class="form-group"> <label for="comment">About Us:</label> ...