What sets apart the Promise type returned by a regular function from that returned by an async function?

Question

What sets apart the Promise type returned by a regular function from that returned by an async function?

Imagine a scenario where I am working on a Typescript project that includes the latest packages:

In this project, I define a function that returns a Promise based on Typescript's native ambient declarations:

import * as q from "q";

function doSomethingElseAsync(): Promise<number> {
    return q.Promise<number>((resolve, reject) => {
        setTimeout(() => resolve(1), 5000);
    });
}

During compilation, an error is thrown by Typescript stating:

error TS2322: Type 'Q.Promise<number>' is not assignable to type 'Promise<number>'.
  Types of property 'then' are incompatible.
    Type '<U>(onFulfill?: ((value: number) => IWhenable<U>) | undefined, onReject?: ((error: any) => IWhena...' is not assignable to type '<TResult1 = number, TResult2 = never>(onfulfilled?: ((value: number) => TResult1 | PromiseLike<TR...'.
      Types of parameters 'onFulfill' and 'onfulfilled' are incompatible.
        Type '((value: number) => TResult1 | PromiseLike<TResult1>) | null | undefined' is not assignable to type '((value: number) => IWhenable<TResult1 | TResult2>) | undefined'.
          Type 'null' is not assignable to type '((value: number) => IWhenable<TResult1 | TResult2>) | undefined'.

Initially thinking it was due to Q Promises not being compatible with Typescript's declarations, the error disappeared completely when adding the async keyword to the function definition.

This peculiar behavior raises questions about whether this is a bug in Typescript, Q, or the Q typings, or if it is an expected but intricate feature of the compiler.

typescript promise async-await q

Answer 1

Answer №1

By adding the async keyword to your function in Javascript, it wraps the return value of that function in a native Promise. This way, whether the function returns a promise or a simple value, the result will always be a promise that can be easily awaited.

For instance, the implementation might look something like this:

Promise.resolve().then(() => doSomethingElseAsync())

If you don't use the async keyword and instead return a q promise, which is not a native instance of a Promise, you'll encounter a type error.

You can have a working solution without using q by making some modifications, as shown below:

function doSomethingElseAsync(): Promise<number> {
    return Promise<number>((resolve, reject) => {
        setTimeout(() => resolve(1), 5000);
    });
}

In case your environment lacks support for the native Promise class, changing the return type could also help, as illustrated here:

function doSomethingElseAsync(): q.Promise<number> {
    return q.Promise<number>((resolve, reject) => {
        setTimeout(() => resolve(1), 5000);
    });
}

Answer 2

By adding the async keyword to your function in Javascript, it wraps the return value of that function in a native Promise. This way, whether the function returns a promise or a simple value, the result will always be a promise that can be easily awaited.

For instance, the implementation might look something like this:

Promise.resolve().then(() => doSomethingElseAsync())

If you don't use the async keyword and instead return a q promise, which is not a native instance of a Promise, you'll encounter a type error.

You can have a working solution without using q by making some modifications, as shown below:

function doSomethingElseAsync(): Promise<number> {
    return Promise<number>((resolve, reject) => {
        setTimeout(() => resolve(1), 5000);
    });
}

In case your environment lacks support for the native Promise class, changing the return type could also help, as illustrated here:

function doSomethingElseAsync(): q.Promise<number> {
    return q.Promise<number>((resolve, reject) => {
        setTimeout(() => resolve(1), 5000);
    });
}

Answer 3

Answer №2

Upon further investigation, it appears that the issue lies in the compatibility between Q promises and async/await.

My attempt to resolve this involved changing the return type of the async function from the native Promise to q.Promise. This adjustment led to an error being thrown by the compiler:

The type '<T>(resolver: (resolve: (val?: T | PromiseLike<T> | undefined) => void, reject: (reason?: any) =>...' is not suitable as an async function return type in ES5/ES3 due to its lack of association with a Promise-compatible constructor value.
  The type '<T>(resolver: (resolve: (val?: T | PromiseLike<T> | undefined) => void, reject: (reason?: any) =>...' does not align with the signature 'new <T>(executor: (resolve: (value?: T | PromiseLike<T> | undefined) => void, reject: (reason?: any) => void) => void): PromiseLike<T>'.

The error message highlights that the return type "is not a valid async function return type in ES5/ES3 because it does not refer to a Promise-compatible constructor value." This discrepancy can be attributed to the fact that q.Promise does not behave like a traditional constructor function callable with new. Conversely, alternative promise libraries such as Bluebird offer compatible constructor functions.

Answer 4

Upon further investigation, it appears that the issue lies in the compatibility between Q promises and async/await.

My attempt to resolve this involved changing the return type of the async function from the native Promise to q.Promise. This adjustment led to an error being thrown by the compiler:

The type '<T>(resolver: (resolve: (val?: T | PromiseLike<T> | undefined) => void, reject: (reason?: any) =>...' is not suitable as an async function return type in ES5/ES3 due to its lack of association with a Promise-compatible constructor value.
  The type '<T>(resolver: (resolve: (val?: T | PromiseLike<T> | undefined) => void, reject: (reason?: any) =>...' does not align with the signature 'new <T>(executor: (resolve: (value?: T | PromiseLike<T> | undefined) => void, reject: (reason?: any) => void) => void): PromiseLike<T>'.

The error message highlights that the return type "is not a valid async function return type in ES5/ES3 because it does not refer to a Promise-compatible constructor value." This discrepancy can be attributed to the fact that q.Promise does not behave like a traditional constructor function callable with new. Conversely, alternative promise libraries such as Bluebird offer compatible constructor functions.

What sets apart the Promise type returned by a regular function from that returned by an async function?

Answer №1

Answer №2

Similar questions

Unlocking the Powers of Angular JS: Mastering the Art of Binding to

Unable to locate the type definition file for 'jquery'

Angular does not support the functionality of having multiple material paginations within a single component

Encountering a type mismatch error in Typescript while working with Redux state in a store file

retrieve a shared string from an array when toggled

Dealing with unresolved promises in async/await functions

Updating a null value within the database was done successfully

Chart.js Axis Labels Orientation Guidelines

Deriving values in Typescript based on a subset of a union for conditional typing

Utilizing class-validator for conditional validation failure

Selecting the best approach to use based on the argument at hand

Efficiently process and handle the responses from Promise.all for every API call, then save the retrieved data

Enhancing your TypeScript version

Asynchronously parsing CSV files in NodeJs using the `await` keyword within the `on('data')`

JavaScript's async function has the capability to halt execution on its own accord

I am encountering unexpected behavior with NextJS's getInitialProps function, as it is giving me a compiler error stating "varName not found on type {}"

TypeScript causing issues when multiple selectors are used

Sign up for receiving updates from an observable obtained through the GET method of HttpClient

What are the steps to fix the error stating that 'loginError.data' is an unknown type?

Is there a way to reset the state within a child component while leveraging the useContext hook?