Base class in Typescript with generics that specifies a foundational callback type

I have been working on creating a versatile base event class:

class BaseEvent<T extends { (args?: any[]): void }> {
    addEventListener(listener: T): { (): void } {
        return () => { };
    }
}

I want to extend this base class to define specific callback parameters:

class ExtraSpecialEvent
    extends BaseEvent<{ (foo: string): void }> {

}

However, I am struggling with the syntax. Here is a playground showcasing my issue.

Does anyone have any suggestions on how to achieve this?

---- UPDATE ----

Thanks to @murat-k's response below, I realized that my generic was expecting an array... However, this is not what I intended. I actually wanted to allow for 0 or more arguments of type any. The solution to my problem was to update the generic to:

class BaseEvent<T extends { (...args: any[]): void }> {
    addEventListener(listener: T): { (): void } {
        return () => {};
    }
}

Answer №1

When declaring args, make sure to specify it as an array type and pass it as an array like this:

class SpecialEvent
    extends BaseEvent<{ (bar: string[]): void }> {

}

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 aria-role in Material UI's <Icon> component for enhanced accessibility

I've been using Material UI's <Icon /> component and came across a reference in their documentation about being able to use role="img", which is mentioned here: https://material-ui.com/components/icons/#semantic-svg-icons. However ...

Bidirectional data binding in angular 12 reactive forms

After working with angular for a while, I encountered an issue while trying to implement two-way binding. The code snippet below is where I'm facing difficulty. Since the use of [(ngModel)] has been deprecated in Angular 12 within formGroup, finding ...

The type '{ status: boolean; image: null; price: number; }[]' does not include all the properties required by the 'SelectedCustomImageType' type

While developing my Next.js 14 TypeScript application, I encountered the following error: Error in type checking: Type '{ status: boolean; image: null; price: number; }[]' is missing the properties 'status', 'image', and &apos ...

My Angular Router is creating duplicate instances of my route components

I have captured screenshots of the application: https://ibb.co/NmnSPNr and https://ibb.co/C0nwG4D info.component.ts / The Info component is a child component of the Item component, displayed when a specific link is routed to. export class InfoComponent imp ...

Angular: Comparing the Performance of Switch Statements and Dictionary Lookups

Having trouble deciding between two options for parsing URL parameters? Both seem suboptimal, but is there a better way to handle this situation? If you have any suggestions for a plausible Option #3, please share. Let's assume we are dealing with up ...

Implementation of the MVP design pattern for fetching model data

Currently, in the process of creating an Android application following the MVP design pattern. I envision having multiple presenters, each implementing a getItems method that calls a static getAll method from its corresponding model. I initially considere ...

Typescript compiler: Unable to locate the definition for 'Map' data type

I am developing an Electron + Angular application. I have decided to incorporate Typescript for my Electron component, so I created a main.ts file and attempted to compile it to main.js using the 'tsc main.ts' command. Unfortunately, I encountere ...

typescript error: passing an 'any' type argument to a 'never' type parameter is not allowed

Encountering an error with newUser this.userObj.assigned_to.push(newUser);, receiving argument of type 'any' is not assignable to parameter of type 'never' typescript solution Looking for a way to declare newUser to resolve the error. ...

TypeORM's one-to-many relationship alters the primary entity once the relationship has been established

When working on my side project, I decided to implement a friend request system using NestJS + TypeORM for the backend. However, I encountered a peculiar issue where every time I tried to associate a Friend entity with a specific user, the target field of ...

Error message TS2345: "Recurse function annotates elements of argument object"

I'm working on a Typescript function that can take a variable number of arguments and access them using the arguments object: function processArguments(): string { const result: Array<string> = []; for (const arg of arguments) { ...

Using a function to reset a radio button selection in Ionic

Currently, I am in the process of developing an ionic app that includes a radio list on one of the pages. However, I have encountered an issue where the radio list does not clear when I navigate to the next screen and then return, resulting in a poor user ...

Adding a Key Value pair to every object within an Array using TypeScript

I have two arrays - one contains dates and the other contains objects. My goal is to include the dates as a key value pair in each object, like this: {"Date": "10-12-18"}. dates: ["10-12-18", "10-13-18", 10-14-18"] data: [ {"name":"One", "age": "4"} ...

Exploring the capabilities of the Next.js router and the useRouter

import { routeHandler } from "next/client"; import { useRouteNavigator } from "next/router"; const CustomComponent = () => { const routerFromHook = useRouteNavigator(); } export default CustomComponent; Can you explain the disti ...

What is the best way to transfer an array of objects between two components in React?

I've exhausted all the solutions found online, but I'm still facing a persistent issue. Despite my efforts, whenever I try to log information in another component, it keeps showing as undefined. (Just to clarify, the data being dealt with is an ...

The health check URL is experiencing issues: Unable to locate any routes

I am currently developing a .net Core 2.2/Angular 8 application and recently came across the HealthCheck feature. I decided to incorporate it into my application, so here is a snippet from my Startup.cs file: using HealthChecks.UI.Client; using Mi ...

Filtering an array in Angular based on two specific property values

I am facing a challenge with deleting items from an array based on two property values. If we were to compare it to the classic Sql delete command, the equivalent would look something like this: DELETE oImages WHERE idOffertRow = 1 and idProductImage = 2 ...

requirements for navigating within an Angular application

Initially, if the first user is already logged in on the first tab and is redirected to the dashboard, when that same user opens a second tab in the same browser (by pasting the login URL), they are automatically redirected to the dashboard without having ...

Execute multiple observables concurrently, without any delay, for every element within a given list

I've been attempting to utilize mergeMap in order to solve this particular issue, but I'm uncertain if my approach is correct. Within my code, there exists a method named getNumbers(), which makes an HTTP request and returns a list of numbers (O ...

Design a personalized hook in React using Typescript that doesn't require the use of props

Recently delving into the world of React and Typescript, I've come across a common dilemma regarding typing props and creating custom hooks without the need to pass props. Let's take an example: import { useState, useEffect } from 'react&apo ...

What is the best way to import modules in Typescript/Javascript synchronously during runtime?

I have a Typescript class where I am attempting to perform a synchronous import, however, the import is being executed asynchronously. My code snippet looks like this: --------------100 lines of code-------------------- import('../../../x/y/z') ...