123

It's my understanding that these two functions will have the same behavior in JavaScript:

const whatever1 = (): Promise<number> => {
    return new Promise((resolve) => {
        resolve(4);
    });
};

const whatever2 = async (): Promise<number> => {
    return new Promise((resolve) => {
        resolve(4);
    });
};

But TypeScript seems to not like the second one, it says:

Type '{}' is not assignable to type 'number'.

Is this a bug in TypeScript, or am I misunderstanding something about async functions?

3
  • 1
    note that using async in your second function is kind of useless, because the function will return a Promise in no time and won't clog the execution whatsoever.
    – vdegenne
    Commented May 8, 2018 at 21:08
  • offtopic, but if you don't really care about promise return you can use Promise<any>
    – jave.web
    Commented Mar 8, 2022 at 9:10
  • I know this is old, but if you know the value being returned is a number, you can do this resolve(4 as number);
    – S. Stark
    Commented Jan 13, 2023 at 18:30

2 Answers 2

153

It's complicated.

First of all, in this code

const p = new Promise((resolve) => {
    resolve(4);
});

the type of p is inferred as Promise<{}>. There is open issue about this on typescript github, so arguably this is a bug, because obviously (for a human), p should be Promise<number>.

Then, Promise<{}> is compatible with Promise<number>, because basically the only property a promise has is then method, and then is compatible in these two promise types in accordance with typescript rules for function types compatibility. That's why there is no error in whatever1.

But the purpose of async is to pretend that you are dealing with actual values, not promises, and then you get the error in whatever2 because {} is obvioulsy not compatible with number.

So the async behavior is the same, but currently some workaround is necessary to make typescript compile it. You could simply provide explicit generic argument when creating a promise like this:

const whatever2 = async (): Promise<number> => {
    return new Promise<number>((resolve) => {
        resolve(4);
    });
};
1
  • Is this not a perfect example of how Typescript is in fact a lot more complicated than JavaScript and how this is unnecessary code that we are putting into the code base to resolve a compiler not to help with type safety?? Commented May 2 at 0:38
40

When you do new Promise((resolve)... the type inferred was Promise<{}> because you should have used new Promise<number>((resolve).

It is interesting that this issue was only highlighted when the async keyword was added. I would recommend reporting this issue to the TS team on GitHub.

There are many ways you can get around this issue. All the following functions have the same behavior:

const whatever1 = () => {
    return new Promise<number>((resolve) => {
        resolve(4);
    });
};

const whatever2 = async () => {
    return new Promise<number>((resolve) => {
        resolve(4);
    });
};

const whatever3 = async () => {
    return await new Promise<number>((resolve) => {
        resolve(4);
    });
};

const whatever4 = async () => {
    return Promise.resolve(4);
};

const whatever5 = async () => {
    return await Promise.resolve(4);
};

const whatever6 = async () => Promise.resolve(4);

const whatever7 = async () => await Promise.resolve(4);

In your IDE you will be able to see that the inferred type for all these functions is () => Promise<number>.

1
  • 1
    If there was a reject somewhere in the Promise function how would the return type still be the same?
    – johnborges
    Commented Feb 4, 2021 at 15:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.