Void vs Undefined in TypeScript: Runtime vs Compile-Time Explained

🔥 Intro

When a TypeScript function doesn’t return anything, does it return voidor undefined?
At runtime, JavaScript always gives you undefined.
At compile-time, TypeScript shows void.
Let’s unpack this apparent contradiction.

---

🕹 Runtime (JavaScript) Perspective

JavaScript doesn’t have void. Every function call evaluates to something.
If you don’t return explicitly, it evaluates to undefined.

function greet(name: string) {
  console.log(`Hello, ${name}!`);
}

console.log(greet("Arka")); 
// Output:
// Hello, Arka!
// undefined

👉 At runtime, the actual return value is always undefined.

---

🛠 Compile-Time (TypeScript) Perspective

TypeScript isn’t executing your code. It’s describing intent at compile-time.
When you don’t return anything, TypeScript marks the return type as void.

function greet(name: string): void {
  console.log(`Hello, ${name}!`);
}

const result = greet("Arka"); 
// result has type void (not undefined)

👉 At compile-time, void means:
“Don’t rely on or use the return value.”

---

❌ Why Not Just undefined?

Let’s try making the return type undefined:

function greet(name: string): undefined {
  console.log(`Hello, ${name}!`);
}

⚡ Compile-time error:

Function lacks ending return statement and return type does not include 'undefined'

Because if you use undefinedas a type, TypeScript expects you to explicitly return undefined:

function doNothing(): undefined {
  return undefined; // ✅ valid
}

So:

• Runtime value: undefined
• Compile-time type: void(unless you explicitly force undefined)

---

🚩 Async Functions

The same rule applies for async functions:

async function greetAsync(name: string): Promise<void> {
  console.log(`Hello, ${name}!`);
}

• At runtime: returns Promise.resolve(undefined)
• At compile-time: return type is Promise<void>

Arrow version:

const greetAsync = async (name: string): Promise<void> => {
  console.log(`Hello, ${name}!`);
};

---

🏗 Real-Life Example

function logger(message: string): void {
  console.log(`[LOG]: ${message}`);
}

async function saveData(data: string): Promise<void> {
  await new Promise(res => setTimeout(res, 1000));
  logger(`Saved: ${data}`);
}

• Runtime: logger returns undefined, saveData resolves to undefined.
• Compile-time: TypeScript shows voidand Promise<void>.

---

💡 Key Takeaways

• Runtime (JavaScript): No-return functions → always return undefined.
• Compile-time (TypeScript): Uses void(or Promise<void>) to signal “don’t use the return value.”
• undefinedas a type: Too strict; requires explicit return undefined;.
• Rule of Thumb: Use voidfor functions with no meaningful return.
• So, next time you see voidin TypeScript, remember: it’s a compile-time abstraction, while undefinedis the actual runtime value.