TypeScript's Awaitable concept

Question

TypeScript's Awaitable concept

Lately, I have been utilizing async / await functions quite frequently in my JavaScript projects. As I make the transition to TypeScript, I am gradually converting some sections of my code bases.

In certain scenarios, my functions require a function as an input that will be called and awaited. This function may return either a promise or a synchronous value. To handle this, I have created a custom type called Awaitable.

type Awaitable<T> = T | Promise<T>;

async function increment(getNumber: () => Awaitable<number>): Promise<number> {
  const num = await getNumber();
  return num + 1;
}

You can call this function like so:

// logs 43
increment(() => 42).then(result => {console.log(result)})

// logs 43
increment(() => Promise.resolve(42)).then(result => {console.log(result)})

While this approach works, it becomes cumbersome to specify Awaitable every time I work on projects involving async/await and TypeScript.

I find it hard to believe that TypeScript does not already have a built-in awaitable type. Could there be one that I am overlooking? Does TypeScript offer a native awaitable type?

typescript async-await

Answer 1

Answer №1

It is my belief that the answer to this query is negative; there is no inherent type available for such a scenario.

Within lib.es5.d.ts and lib.es2015.promise.d.ts, the usage of T | PromiseLike<T> is evident in contexts where your Awaitable<T> would hold relevance. For example:

/**
 * Denotes the culmination of an asynchronous task
 */
interface Promise<T> {
    /**
     * Appends handlers for the resolution or rejection of the Promise.
     * @param onfulfilled The handler triggered upon Promise resolution.
     * @param onrejected The handler triggered upon Promise rejection.
     * @returns A Promise representing the outcome of either handler's execution.
     */
    then<TResult1 = T, TResult2 = never>(onfulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>) | undefined | null, onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | undefined | null): Promise<TResult1 | TResult2>;

    /**
     * Appends a handler specifically for Promise rejection.
     * @param onrejected The handler executed upon Promise rejection.
     * @returns A Promise representing the completion of the handler.
     */
    catch<TResult = never>(onrejected?: ((reason: any) => TResult | PromiseLike<TResult>) | undefined | null): Promise<T | TResult>;
}

In lib.es5.d.ts, the concept of Awaitable akin to what you described seems absent as they have detailed definitions for PromiseLike and Promise.

If such a feature was present, it is plausible to assume it would have been employed in said descriptions.

Note: Considering these clarifications, employing PromiseLike rather than Promise may be advisable when structuring your Awaitable:

type Awaitable<T> = T | PromiseLike<T>;

Answer 2

It is my belief that the answer to this query is negative; there is no inherent type available for such a scenario.

Within lib.es5.d.ts and lib.es2015.promise.d.ts, the usage of T | PromiseLike<T> is evident in contexts where your Awaitable<T> would hold relevance. For example:

/**
 * Denotes the culmination of an asynchronous task
 */
interface Promise<T> {
    /**
     * Appends handlers for the resolution or rejection of the Promise.
     * @param onfulfilled The handler triggered upon Promise resolution.
     * @param onrejected The handler triggered upon Promise rejection.
     * @returns A Promise representing the outcome of either handler's execution.
     */
    then<TResult1 = T, TResult2 = never>(onfulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>) | undefined | null, onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | undefined | null): Promise<TResult1 | TResult2>;

    /**
     * Appends a handler specifically for Promise rejection.
     * @param onrejected The handler executed upon Promise rejection.
     * @returns A Promise representing the completion of the handler.
     */
    catch<TResult = never>(onrejected?: ((reason: any) => TResult | PromiseLike<TResult>) | undefined | null): Promise<T | TResult>;
}

In lib.es5.d.ts, the concept of Awaitable akin to what you described seems absent as they have detailed definitions for PromiseLike and Promise.

If such a feature was present, it is plausible to assume it would have been employed in said descriptions.

Note: Considering these clarifications, employing PromiseLike rather than Promise may be advisable when structuring your Awaitable:

type Awaitable<T> = T | PromiseLike<T>;

Answer 3

Answer №2

async/await transforms statements into promises, ensuring that functions always return a promise.
Anything can be awaited, whether async or not, making a custom Awaitable type potentially unnecessary.

async function test() {
    const foo = await 5;
    console.log(foo);

    const bar = await 'Hello World';
    console.log(bar);

    const foobar = await Promise.resolve('really async');
    console.log(foobar);
}

test();

Visit the TypeScript playground

Extra typing may not be needed, as functions will inherently include:

async function foo<T>(task: () => T | Promise<T>): Promise<T> {
  const result = await task();

  return result;
}

Answer 4

async/await transforms statements into promises, ensuring that functions always return a promise.
Anything can be awaited, whether async or not, making a custom Awaitable type potentially unnecessary.

async function test() {
    const foo = await 5;
    console.log(foo);

    const bar = await 'Hello World';
    console.log(bar);

    const foobar = await Promise.resolve('really async');
    console.log(foobar);
}

test();

Visit the TypeScript playground

Extra typing may not be needed, as functions will inherently include:

async function foo<T>(task: () => T | Promise<T>): Promise<T> {
  const result = await task();

  return result;
}

TypeScript's Awaitable concept

Answer №1

Answer №2

Similar questions

Error encountered when trying to update tree structure in TypeScript with new data due to incorrect array length validation

Matching TypeScript against the resulting type of a string literal template

Issue connecting to Oracle database: Unable to access properties of undefined (attempting to read '_getConnection')

Exploring the process of retrieving data from localStorage in Next.js 13

What is the process for displaying the attributes of a custom object in Typescript?

Angular 13: How to Handle an Empty FormData Object When Uploading Multiple Images

Angular's HostListener triggers twice when the browser's back button is clicked

Tips for building a diverse array of data types and effectively utilizing them based on their specific type in Typescript

What is the reason for TestBed using waitForAsync in beforeEach instead of directly using async/await to compileComponents?

Adjusting ngClass dynamically as values change

What is the best way to assign the selected attribute to my mat-option element?

Discover the steps to initiate Firefox in Incognito Mode using NodeJS and Selenium!

What is the solution to resolving a Typescript error within an imported library?

Can the inclusion of additional parameters compromise the type safety in TypeScript?

Steps for making a GET request from an API in Angular 7

The attribute is not found on the combined type

Angular definitely typed does not convert into JavaScript

Ways to implement useState in a TypeScript environment

Determining function return property type in Typescript by mapping interface argument property

What is the best way to create a custom type guard for a type discriminator in TypeScript?