Function overloads & call signatures
Declare overload signatures for different call shapes and use call signatures inside object types for flexible APIs.
Function overloads & call signatures is a free TypeScript Academy lesson on CoddyKit. This is lesson 1 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the TypeScript Academy learning path, and your progress syncs across the web and the CoddyKit app. The TypeScript Academy course includes 3 lessons in total.
Intro
Goal: Model functions that accept different inputs and return different outputs using overloads, and describe call signatures in object types for callback-like APIs.
Overload pattern
Overloads are declared as multiple signatures plus one implementation that narrows inputs and returns the correct type.
// 1) Overload signatures (no body)
function parse(input: string): number;
function parse(input: number): string;
// 2) Single implementation compatible with all overloads
function parse(input: string | number): string | number {
if (typeof input === "string") {
return input.length; // string -> number
} else {
return String(input); // number -> string
}
}
console.log(parse("TS")); // 2 (number)
console.log(parse(123)); // "123" (string)Call signatures
A call signature lets an object type be callable with overloads (useful for libraries that expose callable functions with properties).
type Stringify = {
(v: number): string;
(v: boolean): string;
};
const toStr: Stringify = (v: number | boolean) => {
return typeof v === "number" ? v.toFixed(1) : (v ? "true" : "false");
};
console.log(toStr(3));
console.log(toStr(false));Narrowing in impl
Implementation must handle all overload shapes. Use in checks or discriminated unions to branch safely.
function area(value: { r: number } | { w: number; h: number }): number {
if ("r" in value) {
return Math.PI * value.r ** 2; // circle
}
return value.w * value.h; // rect
}
console.log(area({ r: 2 }));
console.log(area({ w: 3, h: 4 }));Overloads vs unions
Overloads vs unions:
- Overloads give per-call precise return types.
- Unions keep one signature, simpler but less specific.
- Pick overloads when callers benefit from exact return types.
DX tips
Tips:
- Keep overload counts small and clear.
- Document differences in params/returns.
- Prefer return-type precision where it improves UX.
Overloads check
Quick check: Which pattern correctly declares function overloads?
Recap
Recap: Use overloads for precise per-call types and call signatures to model callable objects. Narrow inside the single implementation to cover every case.
Learn TypeScript with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 101
- Lessons
- 352
Frequently Asked Questions
Is the “Function overloads & call signatures” lesson free?
Yes — the full text of “Function overloads & call signatures” is free to read here on the web. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the TypeScript Academy course, upgrade to CoddyKit PRO. The TypeScript Academy course includes 3 lessons in total.
What will I learn in “Function overloads & call signatures”?
Declare overload signatures for different call shapes and use call signatures inside object types for flexible APIs. You practise TypeScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start TypeScript Academy?
No prior experience is required. TypeScript Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 1 of 3.
How long does the “Function overloads & call signatures” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this TypeScript Academy lesson?
Yes. Every TypeScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Function overloads & call signatures
- this parameter typing; void, never
- Assertion functions & user-defined type guards