Using TypeScript to Return a Derived Class as a Method's Return Type

I'm currently facing a challenge with an abstract class in typescript that includes a method to provide a callback for later use. The issue lies in the return type of the method, as it is set to the class itself, preventing me from using fluent style coding when extending the class. Specifically, I am working on extending the class and struggling to figure out how to make the method return the derived class type:

export abstract class Wizard {
   ...

   public onPageChanging(handler: PageChangingHandler): Wizard { // Returns Wizard (but I would like this to be the derived class instead)
       this.onPageChangingHandler = handler;
       return this;
   }

   public onPageChanged(handler: PageChangedHandler): Wizard { // Returns Wizard (but I would like this to be the derived class instead)
       this.onPageChangedHandler = handler;
       return this;
   }
   ...
}

export class StepWizard extends Wizard {
   ...
}

Snippet of the calling code:


export class Foo {

    private wizard: StepWizard;

    ...
    wireUpWizard() {
        this.wizard = new StepWizard({ 
             elem: HTMLElement,
        }).onPageChanging(pc => {
          // Handle Page Changing
        }).onPageChanged(pc => {
          // Handler Page Changed
        });

        // Problem arises due to inability to use fluent chaining, since onPageChanging/onPageChanged returns Wizard instead of StepWizard
    }

    ...

}

I understand that I need to utilize Generics somehow in order to return a Generic type from onPageChanging and onPageChanged methods, but I have yet to find a solution.

Any assistance would be greatly appreciated.

Answer №1

If you're searching for information on the polymorphic this type, you've come to the right place.

export abstract class Wizard {
   ...

   public onPageChanging(handler: PageChangingHandler): this { // <-- this is crucial
       this.onPageChangingHandler = handler;
       return this;
   }

   public onPageChanged(handler: PageChangedHandler): this { // <-- don't forget this
       this.onPageChangedHandler = handler;
       return this;
   }
   ...
}

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 best way to only buffer specific items from an observable source and emit the rest immediately?

In this scenario, I have a stream of numbers being emitted every second. My goal is to group these numbers into arrays for a duration of 4 seconds, except when the number emitted is divisible by 5, in which case I want it to be emitted immediately without ...

Transform a collection of interfaces consisting of key-value pairs into a unified mapped type

I have a set of interfaces that describe key-value pairs: interface Foo { key: "fooKeyType", value: "fooValueType", } interface Bar { key: "barKeyType", value: "barValueType", } interface Baz { key: "bazKeyType", value: "bazValue ...

The module does not contain 'toPromise' as an exported member in rxjs version 5.5.2

Encountering an error when using toPromise Prior method: import 'rxjs/add/operator/toPromise'; Updated approach: import { toPromise } from 'rxjs/operators'; The new way is causing the following issues: [ts] Module '"d:/.../ ...

How to retrieve an array stored within a JSON object

I am trying to access a specific array within an object from a JSON file. Here is the snippet of the data I'm dealing with: best-sellers": [ { "title": "Chuteira Nike HyperVenomX Proximo II Society", "price": 499.90, "installmen ...

utilizing Typescript object within an array of objects

How can I optimize typing this nested array of objects? const myItem: Items[] = [{ id: 1, text: 'hello', items: [{ id: 1, text: 'world' }] }] One way to approach this is by using interfaces: interface It ...

Steps for executing a single test across multiple URLs using Playwright

My goal is to run a test for over 1000 URLs as quickly as possible. However, I am encountering a timeout error when the number of URLs exceeds 10. It seems like the tests are running sequentially, causing delays. Is there a way to run these tests in parall ...

Tips for Maintaining User Data Across Pages in React using React-Router-Dom and Context

I've been tackling the login functionality of a client-side application. Utilizing React alongside TypeScript, I've incorporated react-router-dom and Context to manage the user's data when they log in. However, upon refreshing the page, the ...

Modifying the color of the chosen item - ion-select

Can anyone help me with changing the color of the selected item on ion-select? I've tried several solutions without success. Any suggestions? Documentation: https://ionicframework.com/docs/api/select I attempted to use the color property, but it did ...

Having difficulty creating a TypeScript function

I've encountered a TypeScript error that has left me puzzled: src/helpers.ts:11:14 - error TS2322: There's an issue with this piece of code and I can't quite grasp it: Type '<T extends "horizontal" | "vertical" | undefined, U extends ...

Is it possible to use the Optimistic Hook with boolean values?

I am facing an issue with a switch component where the checked value is updated only after refetching the data when the user is changed to an admin status. Currently, there is a delay when clicking the switch as it takes time to load and then updates. It ...

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 ...

The type x cannot be assigned to the parameter '{ x: any; }'

Currently learning Angular and Typescript but encountering an error. It seems to be related to specifying the type, but I'm unsure of the exact issue. Still new at this, so any guidance is appreciated! src/app/shopping-list-new/shopping-edit/shopp ...

Tips for customizing Material UI CSS default properties in React

I'm currently working on a React project and utilizing the 'Table' component from Material UI. The default CSS properties of this table, along with its components like TableHead, TableCell, and TableRow, are proving difficult to override whi ...

Utilizing node-canvas to import a .ttf file into TypeScript for registering a custom font

I am trying to incorporate locally stored fonts (in ttf format) into a canvas that is generated using node-canvas. To achieve this, I have created a typings file and included it in my tsconfig: fonts.d.ts declare module '*.ttf'; The fonts hav ...

What is the best way to showcase a collection of inherited objects in Angular?

How can I efficiently display a list of various objects that inherit from the same abstract class in an Angular application? What is considered optimal practice for accomplishing this task? Consider the following basic model: abstract class Vehicle { ...

Enable the use of unfamiliar techniques on object

I am facing a challenge with an object that contains multiple method names which are not known at compile time. The signature of these methods always remains the same, but I am unsure about how to handle this scenario. I attempted to utilize an index type ...

What steps can I take to ensure that the elements are in the same row instead of being displayed in three separate rows?

(I'm a beginner in web development and need some help) Is there a way to align elements into the same row instead of stacking them up in separate rows? I'm working on creating a header bar similar to the one on the Naive UI Documentation Website. ...

Guidelines for dynamically displaying <router-link> or <a> in Vue based on whether the link is internal or external

<template> <component :is="type === 'internal' ? 'router-link' : 'a'" :to="type === 'internal' ? link : null" :href="type !== 'internal' ? link : null" > <slot /> < ...

Transitioning a JavaScriptIonicAngular 1 application to TypescriptIonic 2Angular 2 application

I am currently in the process of transitioning an App from JavaScript\Ionic\Angular1 to Typescript\Ionic2\Angular2 one file at a time. I have extensively researched various guides on migrating between these technologies, completed the A ...

JavaScript - Imported function yields varied outcome from module

I have a utility function in my codebase that helps parse URL query parameters, and it is located within my `utils` package. Here is the code snippet for the function: export function urlQueryParamParser(params: URLSearchParams) { const output:any = {}; ...