Overloads
One name, many shapes
One name can accept several argument shapes when each shape means the same action. Think of a formatter that takes either a number or a date string. Overloads list every supported shape up front so callers pick a valid one.
function format(value: number): string;
function format(value: string): string;
function format(value: number | string): string {
return "v:" + value;
}
const a: string = format(12);
const b: string = format("2026-01-04");
Overload signatures
Each overload signature ends with a semicolon and carries no body. The signatures sit above the real implementation like a menu. Every call must match at least one line of that menu.
function getLen(text: string): number;
function getLen(list: string[]): number;
function getLen(input: string | string[]): number {
return input.length;
}
One implementation
One broader implementation follows all the signatures and does the actual work. Its parameter types must accept every listed shape, so unions are common here. Callers never see this signature, only the overload list above.
function pick(id: number): string;
function pick(name: string): string;
function pick(value: number | string): string {
if (typeof value === "number") {
return "id-" + value;
}
return value;
}
Prefer unions or rest first
Before writing overloads, try a union parameter or a rest parameter first. One signature with a union covers many shapes with less text. Reach for overloads when each shape needs its own return type or its own parameter count.
function format(value: number | string): string {
return "v:" + value;
}
const a: string = format(12);
const b: string = format("hi");
Next: Generics
Article author: Arthur Isaev