How To Type An Async Function In TypeScript

How to type an async Function in TypeScript

Async functions are “special functions” that are declared with the async keyword. If you still don’t know how to type an async function in TypeScript then don’t worry because in this tutorial, we will show you some of the most common ways to get it done.

How to type an async function in TypeScript

First we have to declare an async function before typing it. To declare an async function, we will use the async keyword.

Syntax

async function name(param1, param2,...) {
  statements
}

Parameters:

  • name: name of the function.
  • param: the arguments that are passed to the function.
  • statements: the codes that run inside the function.

Now, let’s come to the main part of this instruction, which is how to type the async function in TypeScript. Here are some possible solutions:

Use ‘type’ keyword

// Using the keyword 'type' to type the function
type Name = {
    (str: string) : Promise<string>;
}

const name: Name = async (str) => {
  const result = await Promise.resolve(str);

  return result;
};

The return type of an async function is a Promise. So we set the return type of the function to Promise<string> using the ‘type’ keyword.

Use the ‘interface’ keyword

We can also use the ‘interface‘ keyword instead. The idea is the same, just the syntax is a little different:

// Using the keyword 'interface' to type the function
interface Name {
    (str: string) : Promise<string>;
}

const name: Name = async (str) => {
  const result = await Promise.resolve(str);

  return result;
};

Arrow function inline

The two above ways are for clear vision and easy-to-read code. If you are familiar with it, you can try to combine the code into an “inline arrow function”

// Declare and set the return type of the function
const  name = async (str : string) : Promise<string> => { 
  const result = await Promise.resolve(str);
  return result;
};

Named function inline

Another similar method is using named function inline:

// Declare and set the return type of the function
async function Name(str: string): Promise<string> {        
  const result = await Promise.resolve(str);
  return result;
};

Some other situations

There are some special occasions where we can have other approaches. 

If we don’t have to return the value of the async function, we should set the return type to Promise<void>

// This string do not return any value
const  Name = async (str : string) : Promise<void> => {
  await Promise.resolve();
  console.log(str);
};

Name('LearnShareIT.com');

Output:

LearnShareIT.com

If the async function runs into an error, try to set the return type into Promise<never>.

const  Name = async (str : string) : Promise<never> => {
  await Promise.resolve();
  throw new Error('Error! There is something wrong! Please check and try again.'); //throw an error
};

Summary

In this tutorial, we have shown how to type an async function in TypeScript. The idea is to use the ‘type’ or ‘interface’ keyword to set the return type of the function. If we don’t need to return the value of the function, we should set the type to Promise<void>. If it throws an error, we can set the type to Promise<never>.

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *