Why async functions don't require a 'then' keyword

Question

Why async functions don't require a 'then' keyword

There are two functions that produce the same outcome:

const p1 = async () => {
  return 1;
};

const p3 = new Promise((resolve, reject) => {
  resolve(1);
});

console.log(typeof p1.then);
console.log(typeof p3.then);

It is surprising that both functions do not transpile to have a "then" property:

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

However, vs-code's intellisense considers them both as promises:

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

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

We can even ensure that the return type is the same if we're explicit about p3:

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

Now, a Promise is "thenable" by definition, right? This becomes important as I have an inferred interface in Typescript from the following function:

export const DELAYED = "WAIT_IN_PARALLEL_DELAYED";
export function delayed<T = any>(delayedPromise: () => Promise<T>) {
  return {
    delayed: DELAYED,
    start(resolve, reject) {
      delayedPromise()
        .then(resolve)
        .catch(reject);
    }
  };
}

I expected that passing in:

 const test = () => async() => 1;

to the function delayed(test) would be acceptable. However, it is indicating that "test" does NOT have a ".then" property. Can someone help me pinpoint the issue in my logic?

typescript async-await

Answer 1

Answer №1

At the outset, it's important to note that p1 and p3 are not identical. While p3 is a type of Promise with a then method, p1 is actually a function that returns a promise, making it a function rather than a promise. This is similar to the scenario with p4 = () => 5, where p4 is a function and not a number.

Essentially, your delayed function necessitates the input of a function that produces a Promise, even though it might seem more straightforward to just provide the Promise itself. In addition, your test function doesn't align with the type of delayedPromise. Why is that?

This misalignment can be understood by looking at your definitions:

delayedPromise: () => Promise<T> // a function that returns Promise<T>
const test = () => async() => 1; // a function that returns a function that returns a Promise

To rectify this, test should be defined as:

const test = async() => 1;

I hope this clarification aids your understanding.

Answer 2

At the outset, it's important to note that p1 and p3 are not identical. While p3 is a type of Promise with a then method, p1 is actually a function that returns a promise, making it a function rather than a promise. This is similar to the scenario with p4 = () => 5, where p4 is a function and not a number.

Essentially, your delayed function necessitates the input of a function that produces a Promise, even though it might seem more straightforward to just provide the Promise itself. In addition, your test function doesn't align with the type of delayedPromise. Why is that?

This misalignment can be understood by looking at your definitions:

delayedPromise: () => Promise<T> // a function that returns Promise<T>
const test = () => async() => 1; // a function that returns a function that returns a Promise

To rectify this, test should be defined as:

const test = async() => 1;

I hope this clarification aids your understanding.

Answer 3

Answer №2

The absence of "then" in async functions

When async functions are called, they do not directly return promises but instead return a promise object with a property called then.

Answer 4

The absence of "then" in async functions

When async functions are called, they do not directly return promises but instead return a promise object with a property called then.

Why async functions don't require a 'then' keyword

Answer №1

Answer №2

Similar questions

Ways to effectively implement a function type specified in an interface

Tips on invoking Bootstrap's collapse function without using JQuery

Angular2 (RC5) global variables across the application

Creating a new list by grouping elements from an existing list

Tips for enabling custom object properties in Chrome DevTools

In Typescript, you can easily group a string into sections that consist of digits like 345-67, along with text containing a

How should trpc query calls be implemented in a Next.js application for optimal performance?

Deleting an element from an object in TypeScript

Exploring the power of Angular 10 components

What is the best way to export a default object containing imported types in TypeScript?

Definition of type instantiation in TypeScript

Show a specific form field based on the chosen option in a dropdown menu using Angular and TypeScript

The issue of inconvenience arises when dealing with `as const` arrays, as the readonly T[] is not directly assignable to T[]. The challenge lies in how to effectively remove

angular directive to receive an object

Why does HttpClient in Angular 4 automatically assume that the request I am sending is in JSON format?

Issues with Angular Reactive Forms Validation behaving strangely

Passing a service into a promise in Angular 2 using TypeScript

What could be causing my code to fail in retrieving lists from the SharePoint site?

The task of mapping an array of objects with nested values using JavaScript is proving to

Tips for sending data to CSS in Angular