How to Type an Async Function in TypeScript ?
Last Updated :
03 May, 2025
An asynchronous function allows your code to do multiple things at once. It doesn't block the execution of the rest of your code while waiting for a long task (like reading a file, making an API request) to finish. Instead, it returns a Promise, making it easier to handle operations that might take time.
- Promise: A JavaScript object representing an asynchronous operation's eventual completion (or failure) and its resulting value.
- Async/Await: Keywords that make asynchronous code easier to write and read, handling promises more intuitively than traditional methods.
Syntax:
async function myAsyncFunction(): Promise<Type> {
// Your async logic here
}
- async: This keyword defines the function as asynchronous, meaning it will return a Promise.
- Promise<Type>: The function will return a Promise that resolves to a value of type Type. You can specify the type of value that the Promise resolves to.
A Simple Asynchronous Function
JavaScript
async function asyncFun(): Promise<string> {
return "Hello, TypeScript!";
}
const a = asyncFun();
console.log(a);
In this example
- We declare sayHello() as an asynchronous function using async.
- The function returns a Promise that will resolve with the string "Hello, TypeScript!".
- When you run sayHello(), it doesn't just give you the result immediately. Instead, it gives you a Promise, which is like saying, "Hey, I’ll get you the result soon."
Output
Promise { 'Hello, TypeScript!' }
Handling Asynchronous Tasks (Simulating Time Delay)
Now, imagine we want to simulate waiting for something to finish, like making a network request or waiting for a timer. This can be done with await
.
Here’s an example where we wait for 1 second before greeting someone:
JavaScript
async function greetUser(name: string): Promise<string> {
// Wait for 1 second (simulating a delay)
await new Promise((resolve) => setTimeout(resolve, 1000)); // Wait for 1 second
const greeting = `Hello, ${name}!`;
console.log(greeting);
return greeting;
}
greetUser("Geeks")
.then((result) => {
console.log("Async Function Result:", result);
})
.catch((error) => {
console.error("Error:", error);
});
In this example
- We use await to simulate waiting for 1 second before creating the greeting.
- While the program is waiting (1 second), it can do other things (your program won’t freeze).
- After 1 second, the greeting is created, and the promise is resolved with the result.
Output
Hello, Geeks!
Async Function Result: Hello, Geeks!
Function with Parameters and Promise Return
In this example, we are going to declare an asynchronous function called asyncFunctionWithParams. This function will take two parameters:
- param1 of type number.
- param2 of type string.
JavaScript
async function asyncFun(param1: number, param2: string): Promise<number> {
return param1 + param2.length;
}
const res= asyncFun(4, "hello");
console.log(res);
In this example
- The asyncFun function returns a Promise because it is an async function.
- The value inside the promise is 9 (calculated as 4 + "hello".length).
- console.log(res) logs the promise object itself, not the resolved value.
Output
Promise { 9 }
Conclusion
In conclusion, asynchronous functions in TypeScript allow you to handle long-running tasks without blocking the program. Using async and await makes the code cleaner and easier to manage. These functions return Promises, representing the eventual result of an operation.
Similar Reads
How to get Argument Types from Function in TypeScript ? In TypeScript, the Parameters utility type allows you to extract the types of a function's parameters. This is particularly useful when you want to work with the types of arguments dynamically, enabling functions that operate on any function's parameter types. In this article, we are going to see ho
2 min read
How to write a function in Typescript ? Writing a function in TypeScript is similar to writing it in JavaScript but with added parameters and return type. Note that any JavaScript function is a perfectly valid TypeScript function. However, we can do better by adding type.Syntax: Let's see a basic TypeScript function syntax (with two argum
4 min read
How to Specify Return Type in TypeScript Arrow Functions ? To Specify the return type in the TypeScript arrow function, we have multiple approaches. In this article, we are going to learn how to Specify the type in the TypeScript arrow function. Below are the approaches used to Specify the return type in the TypeScript arrow function: Table of Content Expli
2 min read
How to Define a Generic Type for an Array in TypeScript ? Generics in TypeScript are a way to write reusable code that can work with different types of data. When it comes to defining generic types for arrays. TypeScript provides flexible options to ensure type safety while allowing for flexibility in the types of elements stored in the array.Table of Cont
3 min read
How to create conditional types in TypeScript ? Conditional types in TypeScript enable defining types based on conditions, similar to conditional statements in code. They determine different types of values, making functions adaptable to various input types, and enhancing code flexibility and maintainability. Syntax: We can create conditional typ
3 min read
TypeScript Anonymous Functions Type In TypeScript, an Anonymous Function Type defines a function without a specific name, specifying parameters and return types. This allows for flexible and reusable function definitions, enabling the assignment of functions to variables and the use of type annotations for parameters and return values
3 min read