Typescript: Specifying proper return type for resolve parameters in promises

Question

Yesterday, I decided to play with typescript and tried to port some basic javascript promise samples to typescript promises. But, during the porting of the samples, I encountered with an issue which I still could't figure out. Tried to google it as well be of no use.

Scenario: I do have a function which returns a Promise which on execution resolves to a number . I also wanted to test some then scenarios on this sample as well.

Please find the code sample below:

function test_promise(): Promise<number>{
    return new Promise((resolve, reject) :number => {
        let result:number = 10;
        resolve(result);
    }).then(result => {            // first then
        console.log("Result: " + (typeof result)); // Result: number
        return result * 2; //
    }).then(result => {            // second then
        return result * 2;
    }).then(result => {            // third then
        return result * 2;
    });
}

I'm adding two screenshots as well for more clarity.

Screenshot 1:

Screenshot 2

There are a couple of things which are not clear to me at the moment:

1. In screenshot 1, the hint item doesn't say that the typeof result is number , but while printing this in console.log , it says it's a number . Whats the difference?
2. If it prints in the console that it's a number , then why it's not allowing me to perform multiply operation on that.

What do I need to change here to make this sample work?

May you guys please shed some light into it. Thanks.

Regards,

Answer 1

The solution here is to explicitly specify the value type of the first Promise object that your instantiate, by adding <number> directly after new Promise as shown:

    /* Add <number> after new Promise */
    return new Promise<number>((resolve, reject) => {
        let result:number = 10;
        resolve(result);
    }).then(result => {            // first then
        console.log("Result: " + (typeof result)); // Result: number
        return result * 2; //
    }).then(result => {            // second then
        return result * 2;
    }).then(result => {            // third then
        return result * 2;
    });

Doing this informs Typescript of the first promises value type, which allows the value type of subsequent promises in the chain to be inferred.

This will in turn resolve your issue. More information on Generics in Typescript can be found here . Hope that helps!

Answer 2

Check the following line:

return new Promise((resolve, reject) :number => {

: number means that the function (or the constructor, which makes still less sense) is returning a number. That's not true! new Promise is obviously returning a Promise, and you don't have to specify it.

What you wanted to say, maybe, it's that the type handled by Promise si a number. You can do it using angular parenthesis:

return new Promise<number>((resolve, reject) => {