The error message indicated that a Promise<string> was expected, but instead a Promise<string|number> was received

Question

The error message indicated that a Promise<string> was expected, but instead a Promise<string|number> was received

Confusion Over Promise Type Error

How did the TypeScript compiler generate the error message displaying

Type Promise <string|number> ...

in the following scenario?

Type 'Promise<string | number>' is not assignable to type 'Promise<number>'. Type 'string | number' is not assignable to type 'number'. Type 'string' is not assignable to type 'number'.

The code snippet that triggers this error message is shown below:

const promise: Promise<number> = Promise.resolve(100).then(n => n.toString());

Expectation vs Reality

I anticipated that

Promise.resolve(100).then(n => n.toString())

would result in a Promise<string>. When trying to assign it to

const promise: Promise<number>

, I expected TypeScript to flag a mismatch between Promise<string> and Promise<number>

However, TypeScript perplexingly introduces a string|number union and raises an issue with Promise<string|number> not being compatible with Promise<number>

typescript

Answer 1

Answer №1

When invoking the TypeScript call signature for the then() method of Promise objects, an interface is defined with two generic type parameters that the compiler infers during the function call.

interface Promise<T> {
  then<R = T, E = never>(
    onfulfilled?: ((value: T) => R | PromiseLike<R>) | undefined | null, 
    onrejected?: ((reason: any) => E | PromiseLike<E>) | undefined | null
  ): Promise<R | E>;
}

The first parameter R refers to the success value returned by the onfulfilled callback, while the second parameter E refers to the error value returned by the onrejected callback. The result is a promise containing a payload of the union type R | E.

By specifying the type of promise as Promise<number>, you are instructing the compiler to expect a Promise<R | E> of type Promise<number>. This triggers contextual typing, where the compiler attempts to determine E based on this constraint.

In a scenario like:

const promise: Promise<number> = Promise.resolve(100).then(n => n.toString());

The inference mechanism fails, resulting in an incompatible return type Promise<string | number> instead of the expected Promise<number>, leading to a compilation error.

This highlights the importance of understanding how type annotations impact inference and outcome when working with generics in TypeScript.

Playground link to code

Answer 2

When invoking the TypeScript call signature for the then() method of Promise objects, an interface is defined with two generic type parameters that the compiler infers during the function call.

interface Promise<T> {
  then<R = T, E = never>(
    onfulfilled?: ((value: T) => R | PromiseLike<R>) | undefined | null, 
    onrejected?: ((reason: any) => E | PromiseLike<E>) | undefined | null
  ): Promise<R | E>;
}

The first parameter R refers to the success value returned by the onfulfilled callback, while the second parameter E refers to the error value returned by the onrejected callback. The result is a promise containing a payload of the union type R | E.

By specifying the type of promise as Promise<number>, you are instructing the compiler to expect a Promise<R | E> of type Promise<number>. This triggers contextual typing, where the compiler attempts to determine E based on this constraint.

In a scenario like:

const promise: Promise<number> = Promise.resolve(100).then(n => n.toString());

The inference mechanism fails, resulting in an incompatible return type Promise<string | number> instead of the expected Promise<number>, leading to a compilation error.

This highlights the importance of understanding how type annotations impact inference and outcome when working with generics in TypeScript.

Playground link to code

The error message indicated that a Promise<string> was expected, but instead a Promise<string|number> was received

Confusion Over Promise Type Error

Expectation vs Reality

Answer №1

Similar questions

How can I successfully transmit the entire event during the (change) event binding with ng-select in Angular 14?

Is there a way to export a specific portion of a destructuring assignment?

What is the reason for typescript's lack of a "function" type?

Typedoc does not create documentation for modules that are imported

There are zero assumptions to be made in Spec - Jasmine analyzing the callback function

Guide to setting up a trigger/alert to activate every 5 minutes using Angular

Increasing a number after a delay in an Angular 2 AppComponent using TypeScript

What could be the rationale behind the optional chaining operator not being fully compatible with a union of classes in TypeScript?

Needing to utilize the provide() function individually for every service in RC4

A novel RxJS5 operator, resembling `.combineLatest`, yet triggers whenever an individual observable emits

Get a specific attribute of an object instead of directly accessing it

Using Typescript to import Eslint with the `import/named` method

The (functionName) does not exist within the subclass as a valid function

How to set return types when converting an Array to a dynamic key Object in Typescript?

What are some ways to enhance this TypeScript code using Functional Programming with the FP-TS library?

The flexibility of adjusting the percentage in the ng-circle-progress feature

What is the best way to retrieve the URL query parameters in a Node.js environment?

Problems with installing ambient typings

Angular/NestJS user roles and authentication through JWT tokens

A different approach to routing in Next.js with getServerSideProps