How to fix Function type '() => void' is not assignable to function type '() => undefined' in TypeScript

What this error means

The error "Function type '() => void' is not assignable to function type '() => undefined'" highlights a subtle but important distinction in TypeScript's type system between 'void' and 'undefined' return types. In JavaScript, a function without a return statement implicitly returns 'undefined'. However, TypeScript distinguishes between: - **'void'**: Means "this function doesn't return anything useful" - any return value is ignored - **'undefined'**: Means "this function returns the specific value 'undefined'" This distinction exists because TypeScript's 'void' has special behavior: when a function type is declared to return 'void', you can actually assign functions that return any value, but that value will be treated as 'void' at the call site. This enables patterns like 'Array.prototype.forEach' which expects a callback returning 'void' but can accept functions that return values. The error occurs when TypeScript's strict type checking prevents assigning a 'void' function to an 'undefined' function type, as they're not considered equivalent despite both representing "no useful return value".

Typical symptoms

• Compilation fails with 'Function type () => void is not assignable to function type () => undefined'
• IDE shows red underlines on function assignments or type declarations
• Error code TS2322 appears in compiler output (type mismatch)
• Code works when using 'any' type but fails with strict typing
• Function callbacks or event handlers fail type checking
• Library functions expecting specific return types reject your implementations

Common causes

1. Assigning a function declared with ': void' return type to a variable expecting ': () => undefined'
2. Implementing an interface or type that requires 'undefined' return with a function that returns 'void'
3. Using 'void' in callback types when the API expects 'undefined'
4. Mismatch between function declarations and implementations in type definitions
5. Library type definitions that incorrectly use 'undefined' instead of 'void'
6. Trying to assign event handlers or callbacks with incompatible return types
7. Generic constraints that differentiate between 'void' and 'undefined'

How to fix "Function type '() => void' is not assignable to function type '() => undefined'"

// BEFORE - causes error
type Handler = () => undefined;
const myHandler: Handler = () => {
  console.log("Hello");
  // Implicitly returns void, not undefined
};

// AFTER - fix by adding explicit return
type Handler = () => undefined;
const myHandler: Handler = () => {
  console.log("Hello");
  return undefined; // Explicitly return undefined
};

// OR change the type to void if appropriate
type Handler = () => void;
const myHandler: Handler = () => {
  console.log("Hello");
  // No return needed for void
};

// Function that doesn't return anything (void)
const logMessage = (msg: string): void => {
  console.log(msg);
};

// Type expecting undefined return
type Callback = () => undefined;

// Type assertion tells TypeScript to trust you
const callback: Callback = logMessage as () => undefined;

// Alternative syntax
const callback2: Callback = logMessage as unknown as () => undefined;

// Use with caution - only when you're sure the function
// won't be used in a context that depends on undefined return

// BEFORE - overly restrictive
interface EventEmitter {
  on(event: string, handler: () => undefined): void;
}

// AFTER - use void for callbacks that don't need to return values
interface EventEmitter {
  on(event: string, handler: () => void): void;
}

// Example usage with void
const emitter: EventEmitter = {
  on: (event, handler) => {
    // handler can return anything, we ignore it
    handler();
  }
};

emitter.on("click", () => {
  console.log("Clicked!");
  // Can return a value (ignored) or nothing
  return 42; // Allowed with void
});

// Library with incorrect type
declare module "bad-library" {
  export type BadCallback = () => undefined;
  export function register(callback: BadCallback): void;
}

// Your wrapper function
function wrapCallback(callback: () => void): () => undefined {
  return () => {
    callback();
    return undefined; // Explicit return to satisfy undefined type
  };
}

// Usage
import { register } from "bad-library";

const myHandler = () => {
  console.log("Handling event");
  // No return - void function
};

// Wrap to satisfy library's incorrect type
register(wrapCallback(myHandler));

// Alternative: inline wrapper
register(() => {
  myHandler();
  return undefined;
});

// Method 1: Overloads
function register(callback: () => void): void;
function register(callback: () => undefined): void;
function register(callback: (() => void) | (() => undefined)): void {
  // Implementation
  const result = callback();
  // result is void | undefined
}

// Method 2: Generic with conditional type
type CallbackReturn<T> = T extends void ? void : undefined;

function register<T extends void | undefined>(
  callback: () => T
): void {
  callback();
}

// Both work
register(() => { console.log("void"); });
register(() => { console.log("undefined"); return undefined; });

// Method 3: Union type (simplest)
type FlexibleCallback = (() => void) | (() => undefined);

function register(callback: FlexibleCallback): void {
  callback();
}

// void functions can return values in certain contexts
type VoidFunc = () => void;

// These are all valid!
const f1: VoidFunc = () => true;
const f2: VoidFunc = () => "hello";
const f3: VoidFunc = () => 42;
const f4: VoidFunc = () => ({ key: "value" });

// When called, the return values are treated as void
const result = f1(); // result has type void

// This enables common patterns
const numbers = [1, 2, 3];
const results = numbers.map(n => n * 2); // returns number[]
numbers.forEach(n => n * 2); // forEach expects (n) => void

// Key insight: If an API expects () => void, you can give it
// a function that returns anything, and it will work.
// The reverse is not true: () => void cannot be assigned to () => undefined.

// Use this knowledge to design better types:
// When in doubt, use 'void' for maximum compatibility

Advanced notes

// React typically uses void for event handlers
type ClickHandler = (event: React.MouseEvent) => void;

const handleClick: ClickHandler = (event) => {
  event.preventDefault();
  // No return needed - void
};

// Node.js style callbacks use void
function readFile(path: string, callback: (err: Error | null, data: Buffer) => void): void {
  // Implementation
}

// void for side effects, undefined for explicit absence
const tap = <T>(fn: (value: T) => void) => (value: T): T => {
  fn(value);
  return value;
};

// Usage
const result = [1, 2, 3]
  .map(x => x * 2)
  .reduce(tap(console.log), 0); // tap returns void

Frequently asked questions

What does "TS2322" mean?

The error "Function type '() => void' is not assignable to function type '() => undefined'" highlights a subtle but important distinction in TypeScript's type system between 'void' and 'undefined' return types. In JavaScript, a function without a return statement implicitly returns 'undefined'. However, TypeScript distinguishes between: - 'void': Means "this function doesn't return anything useful" - any return value is ignored - 'undefined': Means "this function returns the specific value 'undefined'" This distinction exists because TypeScript's 'void' has special behavior: when a function type is declared to return 'void', you can actually assign functions that return any value, but that value will be treated as 'void' at the call site.

How do I fix "TS2322"?

This TypeScript error occurs when you try to assign a function with a 'void' return type to a function type that expects 'undefined'. While both represent 'no useful return', TypeScript treats them differently: 'void' means 'ignores any return value', while 'undefined' means 'must explicitly return undefined'. The fix involves adjusting function signatures or using type assertions.

What causes "TS2322"?

Assigning a function declared with ': void' return type to a variable expecting ': () => undefined' Implementing an interface or type that requires 'undefined' return with a function that returns 'void' Using 'void' in callback types when the API expects 'undefined'

Is the "TS2322" error serious?

It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Related errors

• Generator function must return Generator type

  How to fix 'Generator function must return Generator type' error in TypeScript

  MEDIUM

• Function return type must be assignable to base class return type 'X'

  How to fix "Function return type must be assignable to base class return type 'X'" in TypeScript

  HIGH

• Generic type 'X<T>' requires 1 type argument(s)

  How to fix 'Generic type requires type argument(s)' error in TypeScript

  MEDIUM

• A function whose declared type is neither 'void' nor 'any' must return a value

  A function whose declared type is neither 'void' nor 'any' must return a value

  MEDIUM

• Cannot find name 'process'. Do you need to install type definitions for node? Try `npm i --save-dev @types/node` and then add 'node' to the types field in your tsconfig.

  How to fix "Cannot find name 'process'" in TypeScript

  MEDIUM

• Module has no exported member 'X'

  How to fix 'Module has no exported member X' error in TypeScript

  MEDIUM

Official resources & further reading

• 📚TypeScript Official Documentation
• 📖
  TypeScript Handbook - Functions(Official Docs)
• 📖
  TypeScript Handbook - Everyday Types(Official Docs)
• 📖
  TypeScript Handbook - Type Compatibility(Official Docs)
• TypeScript Playground - void vs undefined example
• Stack Overflow - TypeScript void vs undefined questions
• void and undefined in TypeScript - Detailed explanation
• 🐙
  TypeScript GitHub - void/undefined assignability issues(GitHub)
• Total TypeScript - void vs undefined deep dive