TS Basics

TS Advance

TS Async Programming

❮ Previous Next ❯

TypeScript Async Programming

Modern JavaScript heavily relies on asynchronous operations like Promises and async/await.

TypeScript provides built-in generic types specifically designed to handle these non-blocking flows.

Typing your API responses ensures your application safely handles network delays and payload structures.

It prevents UI components from crashing when data is still loading from remote servers.

1. Typing Promises

The global Promise object in TypeScript is heavily generic, taking a single type parameter.

The parameter defines exactly what data structure the Promise will eventually resolve with.

If you attempt to return a different type of data from the promise, a strict error is generated.

This ensures absolute data predictability when designing external API clients.

Promise Type Example:

// The function returns a Promise that will resolve to a string
function fetchName(): Promise<string> {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("Akash");
    }, 1000);
  });
}


fetchName().then(name => console.log("Resolved:", name));

2. Using async and await

The async keyword forces a regular function to implicitly return a Promise automatically.

Therefore, the return type of an async function must always be Promise<Type>.

Using await safely extracts the underlying data out of the resolved Promise context.

This transforms messy chained callbacks into beautiful, highly readable synchronous-looking logic.

Async/Await Example:

async function getUserData(): Promise<{ id: number }> {
  // Simulated fetch delay
  const response = await Promise.resolve({ id: 101 });
  return response;
}


getUserData().then(data => console.log(data.id));

3. SEO and the Fetch API

Dynamic page rendering heavily depends on lightning-fast data fetching.

By strictly typing the Fetch API responses, you ensure components render instantly without faults.

Fast, fully-rendered DOMs are easily indexed by Google's crawler bots, skyrocketing SEO scores.

Never use any for API responses; always wrap them in rigorous structural interfaces.

Fetch API Example:

interface Post { title: string; body: string; }


async function getPost(): Promise<Post> {
  const res = await fetch("https://api.example.com/post");
  const data = await res.json();
  return data as Post; // Explicit cast to match the interface
}

Exercise

?

What is the required return type for any function marked with the async keyword?

4. Final Thoughts

Asynchronous programming is the backbone of fetching responsive data across the modern web.

Typing promises thoroughly ensures your applications process network responses safely.

Next, we'll dive into the advanced metaprogramming world of Decorators!

❮ Previous Next ❯