Why Async Functions in TypeScript Always Return a Promise

#react #webdev #javascript #typescript

📌Intro

You write a simple asyncfunction, return 42, and suddenly TypeScript yells:
“Type 'number' is not assignable to type 'Promise'.”
Why can’t an async function just return a value? Let’s break it down.

🧠Context & Why:

The asynckeyword in TypeScript (and JavaScript) changes how the function behaves:

Every asyncfunction always returns aPromise<T>.
Even if you return a raw value, it’s wrapped in Promise.resolve(value).

Examples:

// Normal function
function getFavoriteNumber(): number {
  return 26;
}

// Async function
async function getFavoriteNumber(): Promise<number> {
  return 26; // Actually Promise.resolve(26)
}

// Arrow version
const getFavoriteNumber = async (): Promise<number> => {
  return 26;
};

If you try:

async function getFavoriteNumber(): number {
  return 26;
}

TypeScript error:

Type 'number' is not assignable to type 'Promise<number>'.

Real-Life Example:

You might start with a hardcoded value, but later fetch it from an API. Making it async upfront saves refactoring:

const getFavoriteNumber = async (): Promise<number> => {
  const res = await fetch("/api/fav-number");
  const data = await res.json();
  return data.number;
};