Awaitable type in TypeScript

4
votes

I use async / await a lot in JavaScript. Now I’m gradually converting some parts of my code bases to TypeScript.

In some cases my functions accept a function that will be called and awaited. This means it may either return a promise, just a synchronous value. I have defined the Awaitable type for this.

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

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

It can be called like this:

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

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

This works. However, it is annoying having to specify Awaitable for all of my projects that use async/await and TypeScript.

I can’t really believe such a type isn’t built in, but I couldn’t find one. Does TypeScript have a builtin awaitable type?

2
typescriptasync-await
What exactly is the problem? Why do you need to specify Awaitable everywhere in your codebase? Either your function returns T or Promise<T>, either way your function can handle it - Aron
Also type Awaitable<T> = T | Promise<T> isn't that complicated that writing it in multiple projects would that big of a problem - Aron
@Aron But if you have multiple return lines, you would have to wrap every synchronized value in a promise, which is not bad, but you don't have to. - Silvermind
@Aron It is sort of what was added to the post. () => 42 is invalid if you use Promise<T> as the signature, but you can just call await 42 in typescript. - Silvermind
@T.J.Crowder I created an issue - Remco Haszing

2 Answers

2
votes

I believe the answer to this question is: No, there is no built-in type for this.

In lib.es5.d.ts and lib.es2015.promise.d.ts, they use T | PromiseLike<T> for the various places your Awaitable<T> would make sense, for instance:

/**
 * 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>;
}

There's nothing like your Awaitable in lib.es5.d.ts where they define PromiseLike and Promise.

I'd think if they'd defined one, they would use it in those definitions.

Side note: Based on those definitions, it probably makes sense to use PromiseLike rather than Promise in your Awaitable:

type Awaitable<T> = T | PromiseLike<T>;
-1
votes
  1. async/await will always cause the statement to be wrapped into a promise, so your function will always return a promise.
  2. everything can be awaited, regardless of it being async or not, so a custom Awaitable type might just be redundant...
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();

Link to the ts playground

You don't need extra typing imho, since your function will always have:

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

  return result;
}