How to Type an Async Function in TypeScript ?

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

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:

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.

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.