TypeScript Void: Syntax, Usage, and Examples

The void type in TypeScript represents the absence of a return value in a function. You typically use it when a function performs an action, like logging to the console, rather than computing and returning a value. Unlike undefined, which is a specific value, void means no value should be returned.

How to Use Void in TypeScript

Defining a Void Function

When a function does not return anything, declare its return type as void.

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

logMessage("Hello, TypeScript!"); // Output: Hello, TypeScript!

If you try to return a value from a void function, TypeScript throws an error.

function incorrectFunction(): void {
  return "This causes an error"; // Error: Type 'string' is not assignable to type 'void'.
}

Using Void in Function Expressions

You can define function expressions with void to explicitly indicate that they don’t return a value.

const notifyUser: () => void = () => {
  console.log("User notified!");
};

notifyUser(); // Output: User notified!

Void in Callbacks

When passing a function as a callback, you can specify void to ensure it doesn’t return a value.

function executeCallback(callback: () => void): void {
  callback();
}

executeCallback(() => console.log("Executing callback...")); // Output: Executing callback...

Void in Interfaces

In TypeScript, void helps define methods in interfaces that perform actions without returning data.

interface Logger {
  log(message: string): void;
}

const consoleLogger: Logger = {
  log(message) {
    console.log(message);
  },
};

consoleLogger.log("Logging data..."); // Output: Logging data...

When to Use Void in TypeScript

Functions Performing Side Effects

Use void when a function modifies the application state, logs data, or performs actions without returning a value.

function sendAlert(message: string): void {
  alert(message);
}

sendAlert("This is a warning!");

Callbacks That Should Not Return Data

Specifying void in a callback ensures that the function only executes an action and does not produce a result.

function handleEvent(callback: () => void): void {
  callback();
}

handleEvent(() => console.log("Handling event..."));

Type Safety in Object-Oriented Code

When defining class methods that modify object properties but don’t return anything, void provides clarity.

class Counter {
  private count: number = 0;

  increment(): void {
    this.count++;
    console.log(`Count is now ${this.count}`);
  }
}

const counter = new Counter();
counter.increment(); // Output: Count is now 1

Examples of Void in TypeScript

Logging Errors Without Returning a Value

Functions that log errors but don’t return anything should use void.

function logError(errorMessage: string): void {
  console.error(`Error: ${errorMessage}`);
}

logError("Invalid input detected!"); // Output: Error: Invalid input detected!

Using Void in Asynchronous Functions

A function that performs an asynchronous operation but does not return data should use Promise<void>.

async function fetchData(url: string): Promise<void> {
  await fetch(url);
  console.log("Data fetched successfully");
}

fetchData("https://api.example.com");

Event Handlers Using Void

Event handlers in TypeScript should have a void return type since they don’t return meaningful data.

document.addEventListener("click", () => {
  console.log("Page clicked!");
});

Learn More About Void in TypeScript

Void vs. Undefined

Although void suggests a function does not return a value, JavaScript technically returns undefined when no return statement is present.

function returnVoid(): void {
  console.log("This function returns nothing");
}

console.log(returnVoid()); // Output: This function returns nothing
// Output: undefined

This difference matters when working with strict type checking. While void indicates a function should not return anything, undefined is an actual value that can be assigned or checked.

Void vs. Never

• void means a function does not return a meaningful value but still completes execution.
• never means a function never reaches its end, typically because it throws an error or runs indefinitely.

function throwError(message: string): never {
  throw new Error(message);
}

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

Use never for functions that should not return at all, while void is for functions that finish execution but don’t return anything useful.

Promise<void>

When working with asynchronous operations, returning Promise<void> ensures that a function completes but does not produce a return value.

async function saveData(): Promise<void> {
  await new Promise((resolve) => setTimeout(resolve, 1000));
  console.log("Data saved successfully!");
}

saveData();

Using Void in Type Assertions

Sometimes, you may want to assert that a function does not return a value. Assigning the result of an unknown function to void prevents unintended use of its return value.

const fetchData: () => any = () => "Some response";
const result: void = fetchData(); // Allowed, but prevents using the return value

The void type in TypeScript is essential for functions that do not return a meaningful value. Whether you’re defining event handlers, working with callbacks, or structuring class methods, void provides clarity and prevents unintended use of return values.