Syntax for TypeScript generic promises definition

I'm struggling to fully grasp the definition of Promise in TypeScript, as shown below:

/**
 * Represents the completion of an asynchronous operation
 */
interface Promise<T> {
    /**
     * Attaches callbacks for the resolution and/or rejection of the Promise.
     * @param onfulfilled The callback to execute when the Promise is resolved.
     * @param onrejected The callback to execute when the Promise is rejected.
     * @returns A Promise for the completion of which ever callback is executed.
     */
    then<TResult1 = T, TResult2 = never>(onfulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>) | undefined | null, onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | undefined | null): Promise<TResult1 | TResult2>;

    /**
     * Attaches a callback for only the rejection of the Promise.
     * @param onrejected The callback to execute when the Promise is rejected.
     * @returns A Promise for the completion of the callback.
     */
    catch<TResult = never>(onrejected?: ((reason: any) => TResult | PromiseLike<TResult>) | undefined | null): Promise<T | TResult>;
}

My understanding is that

then<TResult1 = T, TResult2 = never>
means then has two generic types, namely TResult1 and TResult2. If not specified, TResult1 defaults to T.

However, it seems that TResult1 is determined by the return type of onfulfilled. Consider this demo:

interface Result {
    status: number;
    message: string;
}

function foo() {
    return new Promise<Result>(function (resolve, reject) {
        resolve({
            status: 0,
            message: 'ok',
        });
     });
}

// here fulfilled1's type is: (local function) fulfilled(out: Result): number
foo().then(function fulfilled1(out) { 
    if (Math.random() > 0.5) {
        return 1;
    }
});
// here fullfilled2's type is: (local function) fulfilled2(out: Result): string
foo().then(function fulfilled2(out) { 
    if (Math.random() > 0.5) {
        return 'hello';
    }
});

Both fulfilled1 and fulfilled2 fit into

then<TResult1 = T, TResult2 = never>
. However, without specifying generic types for then, I expected TResult1 to be Result, but it actually becomes number and string in these cases.

It seems like I may have misunderstood something about TypeScript generics. Any insights would be greatly appreciated.

Answer №1

When TResult1 cannot be inferred, the default option is utilized. In this scenario, inference can be based on the function provided. Given that both parameters in then are optional, a valid call would trigger the default as shown below:

 foo().then() // returns a promise with TResult1

Another example is when only the second argument is passed in, resulting in TResult1 using the default value.

 var r = foo().then(undefined, r => "ERR"); // Promise<string | Result>

If a function is indeed passed in, it has the ability to alter the type of the returned promise. This approach is commonly employed by individuals utilizing promises - initiate an asynchronous call, process the outcome, and provide a different value for the subsequent result.

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

Extract the Top X elements from a multidimensional array

Consider an Array that consists of nested arrays: [ ["2000-01-01", "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d1a9a8abe091b6bcb0b8bdffb2bebc">[email protected]</a>", 1, 9, 338], ["2000-01-01", "<a href="/ ...

Improprove the performance of an array of objects using JavaScript

Hello there, I am currently in the process of creating an array. this.data = [{ label: 'Total', count: details.request.length, }, { label: 'In-Progress', count: details.request.filter((obj) => obj.statusId === 0 || ob ...

Enhancing HTML through Angular 7 with HTTP responses

Sorry to bother you with this question, but I could really use some help. I'm facing an issue with updating the innerHTML or text of a specific HTML div based on data from an observable. When I try to access the element's content using .innerHTM ...

The maximum nested function level has been reached at tsc:1. Consider increasing the FUNCNEST limit

Having an issue while trying to compile a typescript file, encountering the following error: work/gigMax [typescriptMigration●] » tsc src/mutate.ts tsc:1: maximum nested function level reached; increase FUNCNEST? work/gigMax [typescriptMigration●] ...

`Achieving efficient keyboard navigation with MUI Autocomplete and SimpleBar integration in React``

Currently, I am attempting to integrate the Simplebar scrollbar into the MUI Material Autocomplete component in place of the default browser scrollbar. While everything is functioning correctly, this customization has caused me to lose the ability to use t ...

Can you explain the distinction between Array<string> and string[]?

Can you explain the contrast between Array<string> and string[]? var companies: Array<string> = ['Samsung', 'Sony', 'LG']; var businesses: string[] = ['Lenovo', 'Asus', 'Acer']; ...

What is the reason that (click) does not send my data within <button>, while (change) within <input> does in Angular and HTML?

I am facing an issue while trying to send data to my Glassfish RESTful server. The method is activated successfully when I use (change) inside the input tag, but it doesn't work when I try using (click) or (change) to activate the method. I attempted ...

Typescript Angular2 filtering tutorial

In Angular 2 using TypeScript, the goal is to search for matching values from an array within an object array. The intention is to filter out any objects where the 'extraService' property contains any of the values from the 'array_values&apo ...

A guide on transforming a Firebase Snapshot child into a personalized object in a React Native environment

I'm looking for a way to retrieve data from Firebase Realtime Database and display it in FlatList format. What is the most efficient method for extracting the child value and converting it into a custom object? For example: class CustomObject { ...

What is the reason for receiving an error with one loop style while the other does not encounter any issues?

Introduction: Utilizing TypeScript and node-pg (Postgres for Node), I am populating an array of promises and then executing them all using Promise.all(). While pushing queries into an array during iteration over a set of numbers, an error occurs when the ...

Angular 4 - Seeking clarification on the usage of *ngComponentOutlet

When using *ngComponentOutlet, the following code snippets are employed to handle the displaying: Below is a snippet of functional code: this.displayComponent({ 'objects':[ {component: ToDisplayAComponent, expanded: fals ...

The class constructor in the TSdx package must be invoked with the 'new' keyword

I recently developed a npm package using TSdx to create a small Jest reporter. However, when I try to use this package in another project, an error occurs. Uncaught TypeError: Class constructor BaseReporter cannot be invoked without 'new' at ...

The NgZone reference error caused the prerendering to fail

I am facing challenges with the implementation of NgZones. Despite defining NgZone, I keep encountering this error: "NodeInvocationException: Prerendering failed because of error: ReferenceError: NgZone is not defined" Below is my app.error-handle.ts file ...

What is the best way to customize fonts for PDFMake in Angular projects?

Recently, I delved into the PDFMake documentation in hopes of creating a document for my Angular application. Along the way, I stumbled upon queries like this one, but unfortunately, found no answers. I am curious if anyone can offer insight or provide a ...

A step-by-step guide on injecting a model within the root app module of a Nest JS application

Hello, I encountered an error in my Nest app and here is a screenshot of the error: https://i.stack.imgur.com/zY1io.png Below is the code snippet for the AppModule: @Module({ imports: [AppModule,CrudModule,MongooseModule.forRoot("mongodb://localhost:2 ...

Error: Trying to access a property that does not exist on an undefined object (retrieving 'kind

Currently, I am working on a project using angular-CLI. When I attempted to create a new module yesterday, an error popped up in the terminal saying Cannot read properties of undefined (reading 'kind') (only this error there wasn't an ...

Error in Angular compiler-cli: The namespace 'ts' does not contain the exported member 'ResolutionMode'

Currently working on a web application using Angular 16 in Webstorm. The application is still in the pre-release stage, with only minimal functionality completed so far. While editing with ng serve running to test changes as they were made, encountered an ...

The process of ensuring a component is able to watch for the router even when it is not within the router

I am facing an issue with setting v-if for an element to get a boolean value from a function when the router changes the URL. Here is the code snippet for my Header component: <template> <header class="wfm-header"> <div class=" ...

Utilize puppeteer and web-vitals in NextJS to retrieve the web performance metrics of a website

I'm currently working on a basic tool in NextJS that uses puppeteer to fetch web vitals data from a given URL. However, I'm facing an issue where the results are not being printed out. What could be causing this problem? const browser = await pup ...

Issue with TypeScript when calling the jQuery getJSON() method

Currently, I am working with TypeScript version 1.7.5 and the latest jQuery type definition available. However, when I attempt to make a call to $.getJSON(), it results in an error message stating "error TS2346: Supplied parameters do not match any signatu ...