TypeScript supports asynchronous programming using Promises and the async/await syntax, similar to JavaScript, but with added type safety. Here's an overview of how to use async in TypeScript and why it's beneficial:

Syntax

async function fetchData(): Promise<Data> {
    const response = await fetch('<https://api.example.com/data>');
    return await response.json();
}

Why use async in Typescript

1. Type Safety:
   • TypeScript allows you to specify return types for async functions (e.g., Promise<Data>).
   • This helps catch errors at compile-time and improves IntelliSense in IDEs.
2. Better Error Handling:
   • TypeScript can help you handle errors more effectively by enforcing proper error checking.
3. Improved Readability:
   • Async/await syntax makes asynchronous code look more like synchronous code, enhancing readability.
4. Enhanced Maintainability:
   • Type annotations make it clear what kind of data is being passed around, making code easier to maintain and refactor.

Examples

Typing Promises

interface User {
    id: number;
    name: string;
}

async function getUser(id: number): Promise<User> {
    const response = await fetch(`https://api.example.com/users/${id}`);
    return await response.json();
}

Error handling

async function fetchData(): Promise<Data> {
    try {
        const response = await fetch('<https://api.example.com/data>');
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return await response.json();
    } catch (error) {
        console.error("Failed to fetch data:", error);
        throw error; // Re-throw or handle as needed
    }
}

Parallel execution

When you have multiple asynchronous operations that don't depend on each other, you can start them all at once and wait for all of them to complete, rather than executing them sequentially.

1. Promise.all()
   • Executes multiple Promises in parallel and waits for all of them to complete.
   • Returns a Promise that resolves to an array of results.
   • If any Promise rejects, the entire operation rejects.

async function fetchMultipleData(): Promise<[UserData, PostData]> {
    const [userData, postData] = await Promise.all([
        fetchUserData(),
        fetchPostData()
    ]);
    return [userData, postData];
}

1. Promise.allSettled()
   • Similar to Promise.all(), but waits for all Promises to settle (either fulfill or reject).
   • Returns an array of objects describing the outcome of each Promise.
   • Useful when you want to handle both successful and failed operations.

async function fetchMultipleUsersWithStatus(ids: number[]): Promise<PromiseSettledResult<User>[]> {
    const promises = ids.map(id => fetchUser(id));
    return await Promise.allSettled(promises);
}

1. Promise.race()
   • Returns a Promise that settles as soon as one of the Promises in the iterable settles (either fulfills or rejects).
   • Useful for implementing timeouts or choosing the first available result.