When a subclass method overrides a property in the base type and returns `super`, it cannot be reassigned to

Question

When a subclass method overrides a property in the base type and returns `super`, it cannot be reassigned to

If I wish to enhance the functionality of the Promise class by customizing the then() method to execute something before calling super.then():

class ExtendedPromise<T> extends Promise<T> {
  then(...x: Parameters<InstanceType<typeof Promise<T>>["then"]>) {
    console.log("Do something here");
    return super.then(...x);
  }
}

Playground

In TypeScript, there is an error stating that this override is not compatible with the same property in the parent type because unknown cannot be assigned to type TResult1 | TResult2. But why does this occur? I am accepting the exact parameters as the parent type and essentially returning the value from super, so all types should match, right?

typescript

Answer 1

Answer №1

The reason for this behavior is that the Promise's then method has its own set of generics which may not align with the generic type of the overall Promise. When you do not provide these generics for the then function, it defaults to <T, never>. One way to work around this is by statically typing the function parameter types and adding

<TResult1 = T, TResult2 = never>

after the then call. Unfortunately, providing generics directly to the then method in a string index does not work as intended. To achieve what you want, you can try something like this:

class ExtendedPromise<T> extends Promise<T> {
    then<TResult1 = T, TResult2 = never>(...x: Parameters<InstanceType<typeof Promise<T>>["then"]<TResult1, TResult2>>) { 
        console.log("Do something");
        return super.then(...x);
    }
}

Despite attempts, the above approach has shown limitations.

If you opt for explicitly typing the parameters, here's an alternative code snippet:

class ExtendedPromise<T> extends Promise<T> {
    then<TResult1 = T, TResult2 = never>(onfulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>) | null | undefined, onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | null | undefined) {
        console.log("Do something");
        return super.then(onfulfilled, onrejected);
    }
}

Answer 2

The reason for this behavior is that the Promise's then method has its own set of generics which may not align with the generic type of the overall Promise. When you do not provide these generics for the then function, it defaults to <T, never>. One way to work around this is by statically typing the function parameter types and adding

<TResult1 = T, TResult2 = never>

after the then call. Unfortunately, providing generics directly to the then method in a string index does not work as intended. To achieve what you want, you can try something like this:

class ExtendedPromise<T> extends Promise<T> {
    then<TResult1 = T, TResult2 = never>(...x: Parameters<InstanceType<typeof Promise<T>>["then"]<TResult1, TResult2>>) { 
        console.log("Do something");
        return super.then(...x);
    }
}

Despite attempts, the above approach has shown limitations.

If you opt for explicitly typing the parameters, here's an alternative code snippet:

class ExtendedPromise<T> extends Promise<T> {
    then<TResult1 = T, TResult2 = never>(onfulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>) | null | undefined, onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | null | undefined) {
        console.log("Do something");
        return super.then(onfulfilled, onrejected);
    }
}

When a subclass method overrides a property in the base type and returns `super`, it cannot be reassigned to

Answer №1

Similar questions

Protractor encounters an error stating "No element found with specified locator" after attempting to switch to an

How to set an already existing anonymous object to a property within the data property in VueJS

Typescript type cast is not parsed by Prettier

"Utilizing provideMockStore in NgRx 8 for setting the state of a specific State Slice

Best method for locating type declarations in TypeScript 2.0

Converting a string to HTML in Angular 2 with proper formatting

Service Activation Button Click Event

Creating a custom Angular HTTP interceptor to handle authentication headers

The absence of type-safety in the MUI System sx is a glaring issue

Preserve Inference in Typescript Generics When Typing Objects

Tips for creating a custom waitForElementText function in Playwright

Exploring the process of selecting checkboxes in Angular 6

Checking nested arrays recursively in Typescript

Managing situations within the RxJS pipeline

What is the most efficient method for line wrapping in the react className attribute while utilizing Tailwind CSS with minimal impact on performance?

Tips for setting up nested folders using Node.js on a Windows machine:

What's with all the requests for loaders on every single route?

Angular does not permit the use of the property proxyConfig

Is there a way to utilize an Event Emitter to invoke a function that produces a result, and pause until the answer is provided before continuing?

Encountering a 500 (Internal Server Error) while attempting to fetch a single document from MongoDB without utilizing the