Function Types, Overloads & Optional/Default Parameters

function process(callback: (value: number) => void) {
  callback(42);
}
process((n) => console.log(n));

Common follow-ups: How do you write a function type as a named 'type' alias instead of inline?

function greet(name: string, title?: string) {
  return title ? `${title} ${name}` : name;
}
greet('Sam');           // 'Sam'
greet('Sam', 'Dr.');    // 'Dr. Sam'

Common follow-ups: Can an optional parameter come before a required parameter in the list?

function greet(name: string, greeting = 'Hello') {
  return `${greeting}, ${name}`;
}
greet('Sam');           // 'Hello, Sam'
greet('Sam', 'Hi');     // 'Hi, Sam'

Common follow-ups: Can a default parameter's value reference an earlier parameter in the same function?

function makeDate(timestamp: number): Date;
function makeDate(year: number, month: number, day: number): Date;
function makeDate(yearOrTimestamp: number, month?: number, day?: number): Date {
  return month !== undefined
    ? new Date(yearOrTimestamp, month, day!)
    : new Date(yearOrTimestamp);
}
makeDate(2026);           // uses first overload
makeDate(2026, 7, 8);     // uses second overload

Common follow-ups: What error occurs if you call the function with arguments that don't match ANY of the overload signatures?

function sum(...nums: number[]): number {
  return nums.reduce((a, b) => a + b, 0);
}
sum(1, 2, 3); // 6

Common follow-ups: Can you type a rest parameter as a tuple to enforce a fixed minimum number of arguments?

type Handler = (event: Event, index: number) => void;
const handler: Handler = (event) => console.log(event); // OK: fewer params allowed
// const bad: Handler = (event, index, extra) => {}; // Error: too many required params

Common follow-ups: Why does this asymmetry exist — why can a function with FEWER parameters satisfy a type expecting MORE?

function createElement(tag: 'a'): HTMLAnchorElement;
function createElement(tag: 'img'): HTMLImageElement;
function createElement(tag: string): HTMLElement {
  return document.createElement(tag);
}
const link = createElement('a'); // typed as HTMLAnchorElement

Common follow-ups: Could this same effect be achieved with a single generic function and conditional types instead of overloads?

// WRONG ORDER: general overload shadows the specific one
function process(value: unknown): string;
function process(value: number): number; // unreachable! unknown already matched
function process(value: any): any { /* ... */ }

process(42); // incorrectly resolves to the 'unknown' overload, returns string type

Common follow-ups: Does the TypeScript compiler warn you when an overload signature is unreachable like this?

interface Button {
  label: string;
  onClick(this: Button, event: Event): void;
}
const button: Button = {
  label: 'Save',
  onClick(this: Button, event) {
    console.log(this.label); // 'this' is correctly typed as Button here
  }
};

Common follow-ups: How does this relate to needing .bind(this) or an arrow function for event handlers in classes?

function withLogging<Args extends unknown[], R>(
  fn: (...args: Args) => R
): (...args: Args) => R {
  return (...args: Args): R => {
    console.log('calling with', args);
    return fn(...args);
  };
}
const add = (a: number, b: number) => a + b;
const loggedAdd = withLogging(add); // inferred as (a: number, b: number) => number

Common follow-ups: How would Parameters<typeof fn> and ReturnType<typeof fn> be used as an alternative to the generic-inference approach shown here?