M B A R K's Blog
How To Create an asynchronous function in TypeScript?

How To Create an asynchronous function in TypeScript?

M B A R K's photo
M B A R K
·

3 min read

Table of contents

Asynchronous programming is a technique that allows a program to perform multiple tasks concurrently, rather than sequentially. This can be useful for improving the performance and responsiveness of programs, especially those that rely on input/output operations or network communication.

TypeScript is a popular programming language that is a strict superset of JavaScript, adding optional static typing and other features. It also supports asynchronous programming through the async and await keywords.

In this article, we will look at how to create asynchronous functions in TypeScript and how to use them effectively.

The async keyword

To create an asynchronous function in TypeScript, you can use the async keyword before the function declaration. For example:

async function foo() {
  // function body
}

This function can then use the await keyword to pause execution until a promise is resolved or rejected. We will look at how to use await in more detail later.

It's also possible to use the async keyword with arrow functions:

const foo = async () => {
  // function body
}

Asynchronous function return types

An asynchronous function in TypeScript always returns a Promise, regardless of the type of value it returns. For example:

async function foo(): Promise<string> {
  return "Hello, world!";
}

async function bar(): Promise<number> {
  return 42;
}

In the first example, the foo function returns a Promise that resolves to a string. In the second example, the bar function returns a Promise that resolves to a number.

It's also possible to return a rejected Promise from an asynchronous function by throwing an error. For example:

async function foo(): Promise<string> {
  throw new Error("Something went wrong!");
}

This function will return a rejected Promise with the specified error message.

The await keyword

The await keyword can be used to pause the execution of an asynchronous function until a Promise is resolved or rejected. For example:

async function foo() {
  const result = await someAsyncOperation();
  console.log(result);
}

In this example, the foo function will wait for the someAsyncOperation function to complete before logging the result to the console.

It's important to note that the await keyword can only be used within an async function. If you try to use it outside of an async function, you will get a syntax error.

Handling errors with try and catch

If an asynchronous function throws an error, you can use a try...catch block to handle it. For example:

async function foo() {
  try {
    const result = await someAsyncOperation();
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

In this example, the foo function will catch any errors thrown by the someAsyncOperation function and log them to the console.

Chaining asynchronous functions

It's often useful to chain multiple asynchronous functions together, waiting for each one to complete before moving on to the next. This can be done using the await keyword and the then method of a Promise.

For example:

async function foo() {
  const result1 = await asyncOperation1();
  const result2 = await asyncOperation2(result1);
  const result3 = await asyncOperation3(result2);
  console.log(result3);
}

In this example, the foo function will wait for asyncOperation1 to complete, then use the result to call asyncOperation2, and so on.

It's also possible to use the then method of a Promise to chain asynchronous functions together:

async function foo() {
  asyncOperation1()
    .then(result1 => asyncOperation2(result1))
    .then(result2 => asyncOperation3(result2))
    .then(result3 => console.log(result3));
}

Conclusion

Asynchronous functions in TypeScript allow you to perform multiple tasks concurrently, improving the performance and responsiveness of your programs. Using the async and await keywords, you can create asynchronous functions that can pause execution, return promises, and handle errors.

By chaining asynchronous functions together using the await keyword or the then method of a Promise, you can create complex asynchronous logic in a clear and concise way.

TypeScript