Can you explain the purpose of the GenericType parameter in a TypeScript promise declaration for me?

I am curious about whether the generic type in Typescript's Promise<GenericType> definition indicates the type of the object passed to the then handler.

As an example, consider the following code:

    const pr:Promise<Array<Number>> = Promise.resolve([1, 2, 3]);

    const handler = (arg:Array<Number>)=> {
       console.dir(arg);
    }

    pr.then(handler);

Another question arises when we try to assign the handler as a handler:Function. In this case, VSCode shows errors by drawing red squiggles under the pr.then(handler) part of the code. Is there a specific type in Typescript that should be used for handler functions?

Answer №1

Can you confirm if the return type in GenericType is the outcome of the asynchronous operation performed by the promise?

Actually, in your example, there is no generic type present. All types are specifically defined.

Perhaps what you're looking for is this:

const pr:Promise<Array<Number>> = Promise.resolve([1, 2, 3]);

// The handler here is defined with type Array<Number> -> void
const handler = (arg:Array<Number>): void => { // NOTE: void
   console.dir(arg);
}

pr.then(handler);

To demonstrate the importance of type preservation:

// doubleToString has type Number -> String
const doubleToString = (n: Number): String => (n * 2).toString();
const doubledAndStringed: Promise<Array<String>> = pr.then(arr => arr.map(doubleToString));

On the other hand, the following will not work:

const repeatString = (s: String): String => s.repeat(1);
const repeated: Promise<Array<String>> = pr.then(arr => arr.map(repeatString))

If you have a function that returns a Promise based on the type of its argument, that's where you would use a generic type:

const wrap = (x: T): Promise<T> => Promise.resolve(x);

Here, T represents the generic type, ensuring typescript maintains the exact type of the argument:

const wrappedString: Promise<String> = wrap('hello!');

In this case, wrappedString will hold that specific type regardless of annotations.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to automatically include a local variable in all functions

In each of my functions, I start with this specific line: var local = {} By doing so, it allows me to organize my variables using the following structure: local.x = 1 local.y = 2 Is there a way to modify all function prototypes to automatically include ...

Implement real-time word counting in Angular as users type

I am looking to monitor word count in real-time as a user enters text into a textarea field If the word limit of 100 is exceeded, further typing should be restricted I aim to display the word count dynamically as the user types wordCounter() This functi ...

Choosing and aiming with jQuery on dynamically created Ajax pages

I am facing an issue with a Select box on a page that is generated through AJAX. Here is the code snippet: <select onchange="setLocation(this.value)"> <option value="https://xy.com/accessories.html?dir=asc&amp;limit=15&amp;order=name"& ...

CoteJS encounters issues when attempting to generate multiple services

Creating multiple services using cote.js has been a challenge for me. I have around 40 services, each in its own file. The issue arises when I try to start a third service or all of them at once; they stop working, including the two that were functioning p ...

Inversify employs dependency injection similarly to how Angular utilizes TypeScript decorators

Today I made the switch from a js electron project to typescript and found myself wondering about the equivalent of angular's dependency injection. Since Angular Universal is still in its early stages and lacks documentation on using it with electron ...

Export data from a JSON object to a CSV file within the Osmosis function

I am currently utilizing Osmosis, a node.js tool, to extract data in the form of an array of JSON objects. The behavior of Osmosis functions indicates that the array is confined within the function's scope. Consequently, I must also write the file in ...

Tips for preventing the browser from freezing when incorporating a large HTML chunk retrieved through AJAX requests

I've developed a web application that showcases information about various items. Initially, only a small portion of the items are displayed at the top level. Upon loading the page for the first time and displaying these initial items, I make an AJAX r ...

obtainServerSideProps query parameter

Hey there, I'm trying to use NextJS and its getServerSideProps function to send an API Request, but I'm having trouble passing my ID Query Parameter along. The URL for my API is: http://localhost:3001/product/${id} Below is my code: const rout ...

Check for duplicate in AngularJS and replace with larger duplicate

I have this piece of code where I am currently checking for duplicates using the isDuplicate boolean. However, I now want to enhance my code by comparing another property called colorId and then setting the isBigger property for the larger one :) Do you ha ...

Having trouble updating the value of my textfield in material-ui using formik

Below is the code I'm working with to set a default value using the material-ui Textfield API within a formik fieldarray: <TextField name={`myGroups.${index}.myGroupName`} value={`Group ${index+1}`} label="Group" InputProps={{ ...

Press the button to dynamically update the CSS using PHP and AJAX

I have been facing challenges with Ajax, so I decided to switch to using plain JavaScript instead. My goal is to create a button on a banner that will allow me to toggle between two pre-existing CSS files to change the style of the page. I already have a f ...

The comparison between importing TypeScript and ES2015 modules

I am currently facing an issue with TypeScript not recognizing the "default export" of react. Previously, in my JavaScript files, I used: import React from 'react'; import ReactDOM from 'react-dom'; However, in TypeScript, I found tha ...

"Learn how to capture the complete URL and seamlessly transfer it to another JavaScript page using Node.js and Express.js

Is there a way to access the token variable in another page (api.js)? I need to use it in my index.js. var express = require('express'); var router = express.Router(); router.get('/', function(req, res ...

Guide on transferring JavaScript Objects from the Front End to Spring Boot Back-end and effectively processing and parsing them

After struggling with this issue repeatedly while developing my web apps, I've reached a breaking point and need some help. My frustration might come across as venting, but I'm genuinely stuck. The challenge I'm facing is sending key-value ...

The issue with Infinite Scrolling/Pagination feature in backbone.js persists

My goal is to implement an infinite scroll feature similar to Twitter using the Pagination plugin for backbone.js. Clicking the button/link #pagination a should load the next page of results from the backend and append it to the current view PhotoListView. ...

Comparing JSON objects with JavaScript models: A guide

Currently I'm working with angular 2 and I have an array of data. data: MyModel[] = [ { id: 1, name: 'Name', secondName: 'SecondName' } In addition, I have created the interface MyModel: interface MyModel { id: number, nam ...

Print out the data on the webpage that was sent via AJAX

I am currently working on a project where I need to create a web page that takes a number as input and searches for its corresponding name in the database. The challenge is to display the name on the page without reloading it. However, the problem is tha ...

Javascript text validation is malfunctioning as the alert message fails to appear

Looking for a simple form validation script: <script language=”javascript”> function checkForm(register) { if (""==document.forms.register.FNAME.value){ alert("Please fill out this field!"); document.forms.register.FNAME.focus( ...

Data entry and a dropdown menu

Looking to add a dynamic numeric input that changes based on a select box choice. The numeric input will have a specific range based on the selected option from the select box. For instance: If option2 is selected, the numeric input range will be from 2 ...

Selecting HTML5 data attributes using jQuery

There is a button on my page with multiple data attributes, and I am trying to hide it by selecting it based on its class and two specific data attributes. <a href='#' class='wishlist-icon' data-wish-name='product' data-wi ...