Typescript: Defining the correct return type for resolved parameters in promises

Question

Typescript: Defining the correct return type for resolved parameters in promises

Exploring the world of TypeScript, I recently attempted to convert some basic JavaScript promise samples into TypeScript promises. While working on this conversion process, I encountered an issue that has left me puzzled and unable to find a solution even after searching online.

Situation: I have a function that returns a Promise which resolves to a number upon execution. Additionally, I wanted to test various then scenarios with this sample as well.

Below is the code snippet for reference:

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 have included two screenshots below for better understanding.

Screenshot 1:

https://i.sstatic.net/S795t.png

Screenshot 2

https://i.sstatic.net/VZK2v.png

Currently, there are a couple of aspects that remain unclear to me:

In screenshot 1, the hint item does not indicate that the typeof result is number, yet when printed using console.log, it shows as a number. What could be causing this discrepancy?
If the console displays the type as number, why does it prevent me from performing multiplication operations on it?

What modifications should I make in order to get this sample functioning correctly?

I would appreciate any insights or guidance you can provide regarding this issue. Thank you.

Best regards,

javascript typescript

Answer 1

Answer №1

To solve this problem, make sure to specify the type of value for the initial Promise object you create by including <number> right after new Promise, like this:

    /* 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;
    });

This step will notify Typescript about the value type of the initial promise, enabling subsequent promises in the sequence to infer their value types accordingly.

By following these instructions, your issue should be resolved. For more details on Generics in Typescript, refer to this resource. Hope this explanation helps!

Answer 2

To solve this problem, make sure to specify the type of value for the initial Promise object you create by including <number> right after new Promise, like this:

    /* 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;
    });

This step will notify Typescript about the value type of the initial promise, enabling subsequent promises in the sequence to infer their value types accordingly.

By following these instructions, your issue should be resolved. For more details on Generics in Typescript, refer to this resource. Hope this explanation helps!

Answer 3

Answer №2

Review the line below:

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

In this context, using : number implies that the function is expected to return a number, which is incorrect! The new Promise function actually returns a Promise, so there is no need to specify the return type.

Perhaps what you intended to convey is that the type handled by Promise should be a number. This can be achieved by specifying it within angular brackets:

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

Answer 4

Review the line below:

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

In this context, using : number implies that the function is expected to return a number, which is incorrect! The new Promise function actually returns a Promise, so there is no need to specify the return type.

Perhaps what you intended to convey is that the type handled by Promise should be a number. This can be achieved by specifying it within angular brackets:

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

Typescript: Defining the correct return type for resolved parameters in promises

Answer №1

Answer №2

Similar questions

Insert an HTML tag into JSLint

What is the process for defining the root of a project in ESLint?

Tips and Tricks for Managing an Extensive Array of AJAX Requests (Exceeding 1000)

Transform an array from two dimensions to one dimension, while applying specific exceptions

Tips on programmatically filtering angular lists

Angular - The differ is unable to find support for the object 'Item One' which is of type 'string'. NgFor is only able to bind to Iterables like Arrays and not individual objects

I am unable to utilize third-party components within my Nuxt.js/vue.js project

execute a function upon selecting a radio button

Troubleshooting: Instagram API JavaScript Example Showing Errors

Acquire XML documentation for overloaded functions in Typescript

Typescript does not support index signatures with bracket property accessor when importing using the `import * as`

Can HTML variables be accessed in lines of code before they are declared in HTML?

What steps should I take to address and resolve this problem with my Angular $scope?

Combining various Google calendar feeds into a single JSON object using JavaScript

Creating a personalized instance function in Angular's $resource

Using jQuery and regex to only allow alphanumeric characters, excluding symbols and spaces

The expected functionality of sending files via ajax is not happening as anticipated

Unable to combine mui theme with emotion css prop

The Material UI dialog is causing issues for CKEditor 4

"Challenges Encountered When Using Vue.js to Handle Image Paths Containing Variables