What are Function Overloads in TypeScript? | TypeScript Interview Questions

What You'll Learn

Function overload syntax
When to use overloads
Implementation signature

Function Overloads

Define multiple signatures for a function.

code.tsTypeScript

// Overload signatures
function add(a: number, b: number): number;
function add(a: string, b: string): string;

// Implementation signature
function add(a: number | string, b: number | string): number | string {
  if (typeof a === "number" && typeof b === "number") {
    return a + b;
  }
  return String(a) + String(b);
}

add(1, 2);       // number
add("a", "b");   // string

More Examples

code.tsTypeScript

// Different return types based on input
function createElement(tag: "a"): HTMLAnchorElement;
function createElement(tag: "div"): HTMLDivElement;
function createElement(tag: "span"): HTMLSpanElement;
function createElement(tag: string): HTMLElement {
  return document.createElement(tag);
}

const anchor = createElement("a"); // HTMLAnchorElement
const div = createElement("div");  // HTMLDivElement

Optional Parameters

code.tsTypeScript

function format(value: number): string;
function format(value: number, decimals: number): string;
function format(value: number, decimals?: number): string {
  return value.toFixed(decimals ?? 2);
}