DEV Community: Arka Chakraborty

In typescript...if a function returns nothing, is the return type of function signature "void" or "undefined"? Well both are correct, confused...? The answer lies in understanding compile time vs runtime!!!

Arka Chakraborty — Wed, 17 Sep 2025 06:58:30 +0000

Arka Chakraborty

Sep 16 '25

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

#react #webdev #javascript #typescript

Comments

2 min read

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

Arka Chakraborty — Tue, 16 Sep 2025 10:15:17 +0000

🔥 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.

What’s the Return Type of a Function That Returns Nothing in TypeScript?

Arka Chakraborty — Tue, 16 Sep 2025 10:08:09 +0000

📌Intro

If a function doesn’t return anything, what’s its return type in TypeScript? Many developers guess undefinedbut the real answer is a bit more nuanced. Let’s break it down with examples.

🚩 Case 1: Normal Functions (No Return)

When you don’t return anything from a normal function, TypeScript infers its return type as void.

function logMessage(message: string): void {
  console.log(message);
}

Even if you don’t annotate it, TypeScript will automatically infer it:

function logMessage(message: string) {
  console.log(message);
}
// inferred as: (message: string) => void

At runtime, this function technically returns undefined, but TypeScript uses voidto say “ignore the return value.”

🚩 Case 2: Async Functions (No Return)

For asyncfunctions, it’s just Promise<void>.

async function logMessage(message: string): Promise<void> {
  console.log(message);
}

Or with arrow functions:

const logMessage = async (message: string): Promise<void> => {
  console.log(message);
};

Even if you don’t write the annotation, TypeScript infers Promise<void>.

🤔 Why Not undefined?

It’s tempting to write:

function logMessage(message: string): undefined {
  console.log(message);
}

But this will error:

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

That’s because undefinedmeans the function must explicitly return undefined.

Example of correct undefinedreturn:

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

But in most cases, what you want is void, not undefined.

🏗 Real-Life Example

A logger utility:

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

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

Here:

logger returns nothing → void
saveAndLog is async → Promise<void>

💡 Extras

void= “I don’t care about the return value.”
undefined= “This function must return undefined explicitly.”

👉 Always prefer voidunless you specifically want to enforce return undefined;.

Async Arrow Functions in TypeScript (With React Examples)

Arka Chakraborty — Tue, 16 Sep 2025 09:58:30 +0000

📌Intro

In modern TypeScript (and React), arrow functions are everywhere. The good news: async works perfectly with them.

🧠Context

Arrow functions are used in event handlers, array methods, and inline logic. Knowing asyncwith arrows is essential.

Examples:

// Async arrow
const fetchData = async (): Promise<string> => {
  const res = await fetch("/api/message");
  const data = await res.json();
  return data.message;
};

// React handler
const handleSubmit = async (event: React.FormEvent) => {
  event.preventDefault();
  const msg = await fetchData();
  console.log("Message:", msg);
};

// With map + Promise.all
const urls = ["/a", "/b", "/c"];

const fetchAll = async () => {
  const results = await Promise.all(
    urls.map(async url => {
      const res = await fetch(url);
      return res.json();
    })
  );

  console.log(results);
};

📝Real life examples

Form submission in React (onSubmit).
Loading multiple APIs in parallel.

⚠️ forEach(async...) doesn’t work as you expect. Always use map+ Promise.all.

Async vs Await, isn’t This Just Synchronous?

Arka Chakraborty — Tue, 16 Sep 2025 09:13:36 +0000

📌Intro

If awaitpauses execution… doesn’t that make it synchronous again? This is the #1 async misconception.

🧠Context

awaitlooks synchronous but isn’t.
It pauses only the current async function, without blocking the event loop.

Examples:

async function main() {
  console.log("Before");
  await new Promise(res => setTimeout(res, 1000));
  console.log("After");
}

main();
console.log("Outside");

// Output:
// Before
// Outside
// After

Arrow version:

const main = async () => {
  console.log("Start");
  await new Promise(res => setTimeout(res, 1000));
  console.log("Done");
};

main();

💡Real-Life Example:

Your UI doesn’t freeze while waiting for a network call.
E.g., while checking login, users can still scroll, click, or type.

JavaScript is single-threaded, but async/await lets you write non-blocking code that looks clean.

Real life examples of async function signatures in React + Typescript

Arka Chakraborty — Tue, 16 Sep 2025 09:07:35 +0000

Async Function Returning a Boolean — A Practical Example

💡Intro

Theory is boring. Let’s check something real: is a user logged in? That’s a simple Boolean but in modern apps, it’s often async.

🧠Context

Sync version works if the info is instantly available.
But in practice, you check from a server or token → async.

Examples

// Synchronous
function isUserLoggedIn(): boolean {
  return true;
}

// Async
async function isUserLoggedIn(): Promise<boolean> {
  const response = await fetch("/api/check-login");
  const data = await response.json();
  return data.loggedIn;
}

// Arrow version
const isUserLoggedIn = async (): Promise<boolean> => {
  const response = await fetch("/api/check-login");
  const data = await response.json();
  return data.loggedIn;
};

💡Real-Life Example:

Even if you currently return true, keeping the function async future-proofs your code when you switch to an API.

Why Async Functions in TypeScript Always Return a Promise

Arka Chakraborty — Tue, 16 Sep 2025 07:08:10 +0000

📌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;
};

💡Think of asyncas a “Promise factory.” Whatever you return gets gift-wrapped in a Promise.

React + TypeScript: async functions

Arka Chakraborty — Tue, 16 Sep 2025 06:54:20 +0000

When working with TypeScript, one of the most common confusions is around asyncfunctions and their return types. Let’s clear this up with a practical example.

📝A Practical Example: Checking If a User Is Logged In

Imagine you’re building an app where you need to check if a user is logged in.

Synchronous version

function isUserLoggedIn(): boolean {
  return true;
}

This works fine if the answer is always available instantly.

Asynchronous version

But in real-world apps, login status often comes from a server or database:

async function isUserLoggedIn(): Promise<boolean> {
  const response = await fetch("/api/check-login");

  if (!response.ok) {
    return false;
  }

  const data = await response.json();
  return data.loggedIn; // true or false
}

Notice:

The return type is Promise<boolean> (not boolean).
Even though we return trueor false, the value is wrapped in a Promise.

❓Why Promise and not boolean?

Every asyncfunction in TypeScript always returns a Promise.

So this:

return true;

is really:

return Promise.resolve(true);

That’s why the return type must be Promise<boolean>.

If you mistakenly annotate it as just boolean:

async function isUserLoggedIn(): boolean {
  return true;
}

You’ll get a compile error:

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

📝Using the Async Function

// With await
const loggedIn = await isUserLoggedIn();
console.log(loggedIn); // true or false

// Or with .then()
isUserLoggedIn().then(status => console.log(status));

⚠️Misconception: Isn’t This Synchronous Because of await?

A common doubt: “If we’re awaiting, aren’t we back to synchronous execution?”

Answer: No.

awaitpauses execution only in the current function until the Promiseresolves.
But it does not block the event loop. Other tasks can keep running.

So:

Asyncfunctions are still asynchronous under the hood.
awaitjust gives you synchronous-looking syntax for cleaner code.

Example:

async function main() {
  console.log("Before");
  await isUserLoggedIn(); // pauses *this* function only
  console.log("After");
}

main();
console.log("Outside");

Output order:

Before
Outside
After

Notice how "Outside" runs while we were “waiting.” That’s the power of async/await.

📌Async Arrow Functions

asyncworks seamlessly with arrow functions. This is very common in modern TypeScript and React projects.

Example with arrow function

const isUserLoggedIn = async (): Promise<boolean> => {
  const response = await fetch("/api/check-login");
  const data = await response.json();
  return data.loggedIn;
};

In a React handler

const handleSubmit = async (event: React.FormEvent) => {
  event.preventDefault();

  const success = await isUserLoggedIn();
  console.log("Login status:", success);
};

With array methods

Arrow functions and asyncoften pair with array operations:

const urls = ["/a", "/b", "/c"];

const fetchAll = async () => {
  const results = await Promise.all(
    urls.map(async url => {
      const res = await fetch(url);
      return res.json();
    })
  );

  console.log(results);
};

💡Key Takeaways

asyncfunctions always return Promise<T>, never just T.
Returning a raw value auto-wraps it in Promise.resolve(value).
awaitpauses locally but doesn’t block the event loop.
Async arrow functions are common in callbacks, handlers, and array methods.
Use asyncwhen dealing with APIs, databases, or any future async work — it future-proofs your function signatures.

Discriminated Unions in TypeScript: How They Differ from Plain Type Unions

Arka Chakraborty — Mon, 15 Sep 2025 08:35:36 +0000

Type Union vs Discriminated Unions

All unions are not equal, some are smart enough to know what fields exist in each branch.

🧠Context

React components often handle multiple states: forms (loading, success, error), modals (open, closed), or API responses (data vs error).
A common confusion is the difference between plain type unions and discriminated unions. Understanding this distinction helps you write safer, more maintainable React components.

📌Plain Type Unions

A plain union is a type that can hold multiple literal values or types, but TypeScript does not associate additional fields with each value.

type Status = "loading" | "success" | "error";

function render(status: Status) {
  if (status === "success") {
    // ❌ Can't attach extra info like "data"
    return "Form submitted!";
  }
  return "Not submitted";
}

⚠️Limitations of plain unions:

No structured data per state
No automatic type narrowing for properties
Good only for simple flags

📌Discriminated Unions

A discriminated union is a union of objects where each object has:
A discriminant property (usually a literal string like "status" or "type")
Optional additional fields unique to that branch

📝How TypeScript narrows types

type FormState =
  | { status: "loading" }
  | { status: "success"; data: string }
  | { status: "error"; message: string };

function renderForm(state: FormState) {
  if (state.status === "loading") return <p>Loading...</p>;
  if (state.status === "success") return <p>Submitted: {state.data}</p>;
  if (state.status === "error") return <p>Error: {state.message}</p>;
}

TS automatically narrows the type of state based on the discriminant (status)
Each branch has access only to its relevant fields (data, message)

📌With vs Without Discriminated Unions

//Without discriminated unions

type FormState = "loading" | "success" | "error";

function renderForm(state: FormState) {
  if (state === "success") {
    // ❌ Can't attach extra info like data
    return "Form submitted!";
  }
}

//With discriminated unions

type FormState =
  | { status: "loading" }
  | { status: "success"; data: string }
  | { status: "error"; message: string };

function renderForm(state: FormState) {
  if (state.status === "success") {
    // ✅ TS knows 'data' exists
    return `Form submitted with: ${state.data}`;
  }
}

💡Real-Life React Use Cases

Form State Example

type FormState =
  | { status: "idle" }
  | { status: "submitting" }
  | { status: "success"; result: string }
  | { status: "error"; message: string };

function Form({ state }: { state: FormState }) {
  switch (state.status) {
    case "idle": return <button>Submit</button>;
    case "submitting": return <p>Submitting...</p>;
    case "success": return <p>{state.result}</p>;
    case "error": return <p>{state.message}</p>;
  }
}

Modal Example

type ModalState =
  | { open: true; content: string }
  | { open: false };

function Modal({ state }: { state: ModalState }) {
  if (!state.open) return null;
  return <div>{state.content}</div>;
}

📌Key Takeaways

Plain unions are fine for flags, but they cannot carry per-case data.
Discriminated unions let TypeScript know exactly which fields exist per case, making components safer.
For React apps, always prefer discriminated unions for component states, API responses, and mutually exclusive props.

"as const" vs "readonly" in TypeScript: What’s the Difference?

Arka Chakraborty — Mon, 15 Sep 2025 08:10:57 +0000

`as const` vs `readonly`

Both enforce immutability, but they work at different levels and confusing them can lead to subtle bugs.

🧠Context

Developers often ask: when should I use as const, and when should I use readonly? The answer depends on whether you’re working with values or types.

💡Intro

This post compares both features, shows their differences, and explains when to use each.

❓Why Use This?

as const → literal type + value immutability.
readonly → type-level immutability.

📝With vs Without Example

// as const
const roles = ["admin", "user"] as const;
type Role = typeof roles[number]; // "admin" | "user"

// readonly
type Roles = readonly string[];
const roles: Roles = ["admin", "user"];
// Cannot push new items

📌Real Life Use Cases

as const for config objects, button variants.
readonly for API response types, props contracts.

Think of as const as a value lock, and readonly as a type contract.

React+ Typescript: Deep Dive into "readonly"

Arka Chakraborty — Mon, 15 Sep 2025 08:01:00 +0000

Type-Level Immutability in TypeScript with `readonly`

💡Intro

When you want to make sure no one mutates your types, readonly is your tool.

🧠Context

Unlike as const, which applies at the value level, readonly applies immutability at the type level. It prevents accidental mutations in objects, arrays, and class properties.

📌Intro

In React apps, readonly ensures props, API response types, and shared objects remain untouched.

❓Why Use This?

Prevents runtime bugs by forbidding mutation.
Useful for API response modeling.
Guarantees immutability in large codebases.

📝With vs Without Example

// Without readonly
interface User {
  name: string;
  age: number;
}
let user: User = { name: "Arka", age: 22 };
user.age = 23; // Allowed

// With readonly
interface User {
  readonly name: string;
  readonly age: number;
}
let user: User = { name: "Arka", age: 22 };
user.age = 23; // Error: cannot assign

📌Real Life Use Cases

React Props

type ProfileProps = {
  readonly name: string;
  readonly skills: readonly string[];
};

function Profile({ name, skills }: ProfileProps) {
  // Cannot mutate skills inside
  return <div>{skills.join(", ")}</div>;
}

API Response

type ApiResponse = {
  readonly id: number;
  readonly status: "success" | "error";
};

readonly ensures compile-time safety. It does not make runtime data truly immutable, it just prevents mutation in code.

Unlocking Literal Types in TypeScript with "as const"

Arka Chakraborty — Mon, 15 Sep 2025 07:06:22 +0000

Deep Dive into as const

Ever declared a constant in TypeScript and wondered why its type widened to stringinstead of "blue"? That’s where as const comes in.

💡Context

By default, TypeScript widens literal values. This can make union types and prop definitions less strict. The as const assertion prevents widening, preserving exact literal types and making objects/arrays readonly at the value level.

💡Intro

In React projects, as const is handy for config objects, tuple-like arrays, and state actions. It enforces immutability while improving type safety.

💡Why Use This?

Prevents type widening ("blue" vs string).
Makes arrays/objects deeply readonly.
Critical for discriminated unions.

💡Without as const

// Without as const
const color = "blue";
type Color = typeof color; 
// type is string

💡With as const

// With as const
const color = "blue" as const;
type Color = typeof color; 
// type is "blue"

💡Real Life Use Cases

Component Props

const buttonVariants = ["primary", "secondary"] as const;
type Variant = typeof buttonVariants[number];

type ButtonProps = { variant: Variant };

function Button({ variant }: ButtonProps) {
  return <button>{variant}</button>;
}

Config Objects

const theme = {
  mode: "dark",
  accent: "blue",
} as const;

// Types are "dark" | "blue", not string

💡Remember: as const is for values, not type definitions.

DEV Community: Arka Chakraborty

In typescript...if a function returns nothing, is the return type of function signature "void" or "undefined"? Well both are correct, confused...? The answer lies in understanding compile time vs runtime!!!

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

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

🔥 Intro

🕹 Runtime (JavaScript) Perspective

🛠 Compile-Time (TypeScript) Perspective

❌ Why Not Just undefined?

🚩 Async Functions

🏗 Real-Life Example

💡 Key Takeaways

What’s the Return Type of a Function That Returns Nothing in TypeScript?

📌Intro

🚩 Case 1: Normal Functions (No Return)

🚩 Case 2: Async Functions (No Return)

🤔 Why Not undefined?

🏗 Real-Life Example

💡 Extras

Async Arrow Functions in TypeScript (With React Examples)

📌Intro

🧠Context

📝Real life examples

Async vs Await, isn’t This Just Synchronous?

📌Intro

🧠Context

💡Real-Life Example:

Real life examples of async function signatures in React + Typescript

Async Function Returning a Boolean — A Practical Example

💡Intro

🧠Context

💡Real-Life Example:

Why Async Functions in TypeScript Always Return a Promise

📌Intro

🧠Context & Why:

React + TypeScript: async functions

📝A Practical Example: Checking If a User Is Logged In

❓Why Promise and not boolean?

📝Using the Async Function

⚠️Misconception: Isn’t This Synchronous Because of await?

📌Async Arrow Functions

💡Key Takeaways

Discriminated Unions in TypeScript: How They Differ from Plain Type Unions

Type Union vs Discriminated Unions

"as const" vs "readonly" in TypeScript: What’s the Difference?

as const vs readonly

React+ Typescript: Deep Dive into "readonly"

Type-Level Immutability in TypeScript with readonly

Unlocking Literal Types in TypeScript with "as const"

Deep Dive into as const

`as const` vs `readonly`

Type-Level Immutability in TypeScript with `readonly`