Creating a subclass or extending a Promise in Typescript does not require referencing a constructor value that is compatible with Promises

Question

Creating a subclass or extending a Promise in Typescript does not require referencing a constructor value that is compatible with Promises

I am currently working on a way to terminate my async method call in Typescript.

In order to achieve this, I decided to create a new type of Promise that extends from the standard Promise:

class CustomPromise<T> extends Promise<T>{

    private abortFunction: () => void;
    constructor(executor: (resolve: (value?: T | PromiseLike<T>) => void, reject: (reason?: any) => void) => void, abortFunction: () => void) {
        super(executor);
        this.abortFunction = abortFunction;
    }

    //terminate the operation
    public cancel() {
        if (this.abortFunction) {
            this.abortFunction();
        }
    }
}

However, when attempting to implement it like so:

async uploadFile<T>(file: File): CustomPromise<T> { ... }

I encounter the following error:

Error Build:Type 'typeof CustomPromise' is not a valid async function return type in ES5/ES3 because it does not refer to a Promise-compatible constructor value.

If I specify the type and return the CustomPromise, as shown below, it compiles successfully:

async uploadFile<T>(file: File): Promise<T>  { 
     ...
     return CustomPromise(...);
}

What am I missing here? I have noticed that in ES6 you can subclass the Promise (refer to stackoverflow question), which makes me believe it should be possible in TypeScript too.

This project uses TypeScript version 2.1 with es5 targeting.

typescript promise typescript2.1

Answer 1

Answer №1

Initially, I found the error message to be a bit vague, but I realized that the constructor's signature must match exactly with the constructor of Promise.

I have eliminated the cancelMethod from the constructor and will assign it later. Here is the modified code:

class CancelablePromise<T> extends Promise<T>{

    public cancelMethod: () => void;
    constructor(executor: (resolve: (value?: T | PromiseLike<T>) => void, reject: (reason?: any) => void) => void) {
        super(executor);

    }

    //cancel the operation
    public cancel() {
        if (this.cancelMethod) {
            this.cancelMethod();
        }
    }
}

You can call the method like this:

async postFileAjax<T>(file: File): CancelablePromise <T> { 

    var promiseFunc = (resolve) => { resolve() };
    var promise = new CancelablePromise<T>(promiseFunc);
    promise.cancelMethod = () => { console.log("cancel!") };

    return promise;
}

Answer 2

Initially, I found the error message to be a bit vague, but I realized that the constructor's signature must match exactly with the constructor of Promise.

I have eliminated the cancelMethod from the constructor and will assign it later. Here is the modified code:

class CancelablePromise<T> extends Promise<T>{

    public cancelMethod: () => void;
    constructor(executor: (resolve: (value?: T | PromiseLike<T>) => void, reject: (reason?: any) => void) => void) {
        super(executor);

    }

    //cancel the operation
    public cancel() {
        if (this.cancelMethod) {
            this.cancelMethod();
        }
    }
}

You can call the method like this:

async postFileAjax<T>(file: File): CancelablePromise <T> { 

    var promiseFunc = (resolve) => { resolve() };
    var promise = new CancelablePromise<T>(promiseFunc);
    promise.cancelMethod = () => { console.log("cancel!") };

    return promise;
}

Answer 3

Answer №2

It is more efficient to utilize the utility type ConstructorParameters along with typeof instead of repeatedly copying types from constructor parameters:

class CustomPromise<T> extends Promise<T> {

  constructor(...args: ConstructorParameters<typeof Promise<T>>) {
    super(...args);
  }

}

Incorporating an additional argument can be a bit challenging

class CustomPromise<T> extends Promise<T> {

  constructor(...args: [...ConstructorParameters<typeof Promise<T>>, () => void]) {
    const [executor, cancel] = args
    super(executor);

    this.cancel = cancel;
  }

}

Answer 4

It is more efficient to utilize the utility type ConstructorParameters along with typeof instead of repeatedly copying types from constructor parameters:

class CustomPromise<T> extends Promise<T> {

  constructor(...args: ConstructorParameters<typeof Promise<T>>) {
    super(...args);
  }

}

Incorporating an additional argument can be a bit challenging

class CustomPromise<T> extends Promise<T> {

  constructor(...args: [...ConstructorParameters<typeof Promise<T>>, () => void]) {
    const [executor, cancel] = args
    super(executor);

    this.cancel = cancel;
  }

}

Creating a subclass or extending a Promise in Typescript does not require referencing a constructor value that is compatible with Promises

Answer №1

Answer №2

Similar questions

The function passed as a prop is unrecognized

How to create classes in typescript without utilizing the class keyword

What is preventing the use of this promise syntax for sending expressions?

Experiencing an issue with Jest - Error: unable to access property 'forEach' of null

At runtime, the array inexplicably becomes null

Steps for removing the console warning message: "The use of enableRowSelect has been deprecated. Instead, please utilize rowSelection."

The request.files property in express-fileupload is consistently coming back as undefined

Uh-oh! Looks like there was an issue trying to read properties of something that doesn't exist

Angular 5: dynamic component swapping

Transmit information using JSON format in Angular 8 using FormData

Issue: Attempting to assign a 'boolean' variable to a type of 'Observable<boolean>' is not compatible

How to require 2 out of 4 input fields in Angular using typescript

There seems to be an issue with Material-UI and TypeScript where a parameter of type 'string' does not have an index signature in the type 'ClassNameMap<"container" | "navBar" | "section0">'

Strategies for obtaining multiple instances of duplicated data within an array object

Angular - Best practices for exchanging feedback between sibling components

Importing Angular libraries with the * symbol

What is the best way to modify the KeyName in an object?

Merge asynchronous sequences using built-in promises

Why use rxjs observables if they don't respond to updates?

Can functions be stored and invoked within a dictionary in TypeScript?