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

Using import statement is mandatory when loading ES Module in TS Node: server/src/index.ts

Utilizando Typescript com Ionic 2 e AngularJS para autenticar através de um método de post na requisição HTTP e

I am puzzled by this error in Typescript: "Why does the element have an 'any' type when the Object type lacks an index signature?"

Troubleshooting: Issues with Angular2 compatibility on Safari version 9.1.2

Explaining the distinction between include and rootDir in tsconfig.json

Crafting interactive buttons with angular material

Converting Promises to Observables

Ways to break down a collection of multiple arrays

incorrect implementation of react lifecycle phases

The specified main access point, "@angular/cdk/platform", is lacking in required dependencies

React Native: Issue with the data section in FlatList

Angular RxJS: The never-ending reduction

Issue with loading React Router custom props array but custom string works fine

Error: The argument provided is of type 'unknown', which cannot be assigned to a parameter of type 'string'. This issue arose when attempting to utilize JSON.parse in a TypeScript implementation

Issue encountered while developing custom Vuejs + Typescript plugin

Bizarre Behavior of String Comparison in Typescript When Using String.toLowerCase

Tips on Importing a Javascript Module from an external javascript file into an <script> tag within an HTML file

Can anyone provide guidance on setting up a TypeScript service worker in Vue 3 using the vite-plugin-pwa extension?

Is there a solution to address this login code with multiple queries in Mongoose?

Trouble encountered with the implementation of setValue on placeholder