New approach in Typescript: Enhancement of child class with additional Event Listener overloads

Question

New approach in Typescript: Enhancement of child class with additional Event Listener overloads

One of my classes is structured like this:

interface A extends EventEmitter{
    on(event: "eventA", listener: () => void): this;
}

There is another class defined as follows:

interface B extends A{
    on(event: "eventB", listener: () => void): this;
}

My intention is to utilize these classes in the following manner:

const foo = new B();
foo.on("eventA", listenerForA);
foo.on("eventB", listenerForB);

Note that it is not feasible to make any changes to Class A. When attempting to implement this, I encounter an Error message:

TS2415: Class 'B' incorrectly extends 'A'

PS: The declaration of both Class A and Class B is necessary, but they have been omitted here for clarity.

view code in TS playground

Edit: It has been suggested to replicate the overloads from the parent class. However, I am curious if there is an alternative method to achieve this without duplicating the overloads?

Thank you for any assistance provided.

typescript inheritance event-listener eventemitter

Answer 1

Answer №1

After being inspired by the response provided by Фарид Ахмедов, I have crafted this piece of code that handles callback overloads as well:

interface B extends A{
    on(event: Parameters<A['on']>[0], listener: Parameters<A['on']>[1]): this;
    on(event: "eventB", listener: (bar: string) => void): this;
}

The initial overload simply replicates the existing ones.

By leveraging Parameters<...>, you can also incorporate multiple overloads for EventEmitter.emit().

Answer 2

After being inspired by the response provided by Фарид Ахмедов, I have crafted this piece of code that handles callback overloads as well:

interface B extends A{
    on(event: Parameters<A['on']>[0], listener: Parameters<A['on']>[1]): this;
    on(event: "eventB", listener: (bar: string) => void): this;
}

The initial overload simply replicates the existing ones.

By leveraging Parameters<...>, you can also incorporate multiple overloads for EventEmitter.emit().

Answer 3

Answer №2

Perhaps a different approach:

// Defining types based on event parameters
type EventFrom<T extends A> = Parameters<T['on']>[0]

interface A {
    on(event: "eventA"): this;
}

interface B extends A {
    on(event: "eventB" | EventFrom<A>): this; // eventA | eventB
}

interface C extends B {
    on(event: "eventC" | EventFrom<B>): this; // eventA | eventB | eventC
}

Answer 4

Perhaps a different approach:

// Defining types based on event parameters
type EventFrom<T extends A> = Parameters<T['on']>[0]

interface A {
    on(event: "eventA"): this;
}

interface B extends A {
    on(event: "eventB" | EventFrom<A>): this; // eventA | eventB
}

interface C extends B {
    on(event: "eventC" | EventFrom<B>): this; // eventA | eventB | eventC
}

New approach in Typescript: Enhancement of child class with additional Event Listener overloads

Answer №1

Answer №2

Similar questions

Unable to get the onchange event to trigger for a span element

Changing a password on Firebase using Angular 5

Using Angular 4 to retrieve a dynamic array from Firebase

Leverage es6 classes along with mongoose in typescript to utilize loadClass functionality

Updating an array within a dynamic form using patchValue in Angular 4

The interface is unable to populate the Array of Elements

Error in Docker: Unable to resolve due to sender error: context has been terminated

What are the steps to successfully launch a Node.js / Express application with typescript on heroku?

npm-bundle encounters an issue with Error: ENOENT when it cannot find the file or directory specified as 'package.json'

What distinguishes between the methods of detecting falsy and truthy values?

NEXT JS 13 experiencing an infinite loop when using State, encountering an error with Params, and facing issues with hook definition

I'm unable to modify the text within my child component - what's the reason behind this limitation?

How to change a specific value in an array of objects using React

The functionality for handling gestures on AgmMap appears to be non-functional

Creating a Map in TypeScript from an Array

What is the best way to transfer props between components using typescript?

Authentication of users using NextJS Dashboard App API

Tips for identifying the most effective element locator in the DOM with Playwright

I encountered a MISSING_MESSAGE error while using the next-intl npm package in my next.js application

Transforming a JavaScript component based on classes into a TypeScript component by employing dynamic prop destructuring