Using Inheritance to Create Custom Event/Callback Handlers in TypeScript

Question

Using Inheritance to Create Custom Event/Callback Handlers in TypeScript

Currently facing an issue with Typescript that I'm stuck on.

I have created a named callback Handler class that receives the allowed list of "events"/"handlernames" as a generic:

class NamedHandler<H extends { [key: string]: HandlerFunction }> {
...

Using this in other classes works well for simple use cases within one class.

export class MyClass<H extends { [key: string]: HandlerFunction }> {
    protected commandHandler = new NamedHandler<H>();
    ... 
}

type SimpleHandlers = {
    handlerA: (param: number) => Promise<void>;
}

class SimpleClass<H extends { [key: string]: HandlerFunction }> extends MyClass<SimpleHandlers> {

However, extending from this class and expanding the permissible "handler names" seems to be a challenge without a clear solution at the moment.

An example has been provided in the TS Playground

If anyone has any insights on solving this or alternative approaches, it would be greatly appreciated. Thank you.

typescript typescript-generics

Answer 1

Answer №1

An error occurs in the line

class ExtendedClass extends SimpleClass<ExtendedHandlers>

.

The definition of
```
SimpleClass<ExtendedHandlers>
```
is as follows:
```
class SimpleClass<H extends HandlerObj> extends MyClass<SimpleHandlers> { ... }
```
- ...which specifically assigns the type SimpleHandlers, lacking a member named commandB.
The solution involves passing the type parameter H of SimpleClass<H> into MyClass<H>:
```
class SimpleClass<H extends HandlerObj> extends MyClass<H>  { ... }
```
Check out thisTS Playground link for an example of the expected behavior.
- Other parts of the code have issues such as using the incorrect method to remove properties from object values, but that's a separate topic.

Answer 2

An error occurs in the line

class ExtendedClass extends SimpleClass<ExtendedHandlers>

.

The definition of
```
SimpleClass<ExtendedHandlers>
```
is as follows:
```
class SimpleClass<H extends HandlerObj> extends MyClass<SimpleHandlers> { ... }
```
- ...which specifically assigns the type SimpleHandlers, lacking a member named commandB.
The solution involves passing the type parameter H of SimpleClass<H> into MyClass<H>:
```
class SimpleClass<H extends HandlerObj> extends MyClass<H>  { ... }
```
Check out thisTS Playground link for an example of the expected behavior.
- Other parts of the code have issues such as using the incorrect method to remove properties from object values, but that's a separate topic.

Using Inheritance to Create Custom Event/Callback Handlers in TypeScript

Answer №1

Similar questions

The index access type cannot be used with T[Key extends keyof T]

Utilize React's useState hook in combination with TypeScript to effectively set a typed nested object

Unused code splitting chunk in React production build would improve performance and efficiency of

How to use sinon to create a mock for an independently imported function

Updating tooltip text for checkbox dynamically in Angular 6

Picking up Angular component property values within a callback function from Google Charts

Ways to modify Angular pipe without specifying data types

What is the process for creating a jQuery object in TypeScript for the `window` and `document` objects?

What are the steps to connecting incoming data to an Angular view utilizing a reactive form?

Embracing the "export ... from" feature in the TypeScript compiler

Ionic 3 Local Notification spamming a particular page with excessive pushes

The property 'filter' is not recognized on the 'Object' type. An attempt to filter the response was made

What is the best way to delegate the anonymous function logic contained within the subscribe() method?

Struggling to dynamically update array values by comparing two arrays

How can you load an HTML page in Puppeteer without any CSS, JS, fonts, or images?

The module cannot be located due to an error: Package path ./dist/style.css is not being exported from the package

Exploring two main pages, each with tabs displaying two negative behaviors

Angular data binding with an object instead of an array list

Which is the better choice for simply invoking a service method - subscribe or toPromise?

A comprehensive guide on enabling visibility of a variable within the confines of a function scope