Everyday TypeScript: Async Await

• JavaScript's async/await syntax lets us use promises, but with a more natural syntax. Like promises, async/await fits nicely into TypeScript's type system. When we await a Promise<T>, we get a value of type T.

• (Note that async functions always return promises. All of the examples in this lesson result in promises, which Execute Program represents as {fulfilled: theValueHere}.)

• >

  async function returns5() {
    const aPromise = Promise.resolve(5);
    const aNumber: number = await aPromise;
    return aNumber;
  }
  
  returns5();

  Async Result:

  Asynchronous ResultThis result will wait up to 3000ms for a response from the code before returning.

  Run Code

• Async functions must have a return type of Promise<T>. This makes sense if we think about it: an async function always returns a promise. If we give our async function a non-promise return type, that's a type error.

• >

  async function asyncDouble(x: Promise<number>): Promise<number> {
    return 2 * await x;
  }
  
  asyncDouble(Promise.resolve(5));

  Async Result:

  Asynchronous ResultThis result will wait up to 3000ms for a response from the code before returning.

  {fulfilled: 10}

• Here's a code problem:

  The async function below has a return type of number. That's a type error: async functions must always have a return type of Promise<SomeOtherType>. Wrap the return type in Promise to fix the type error. (You only need to change the return type; the rest of the function is correct.)

  9

  1

  2

  3

  async function asyncDouble(x: Promise<number>): Promise<number> {

  return 2 * await x;

  }

  12

  4

  asyncDouble(Promise.resolve(5));

  Async Result:

  Asynchronous ResultThis result will wait up to 3000ms for a response from the code before returning.

  Goal:

  {fulfilled: 10}

  Yours:

  {fulfilled: 10}

  Show Author's Answer