What are Function Overloads in TypeScript?
Understand TypeScript function overloads: multiple call signatures, the hidden implementation signature, overload resolution, and a precise typed example.
Expected Interview Answer
Function overloads let you declare multiple call signatures for a single function so that different argument shapes produce different, precise return types.
You write several overload signatures with no body, followed by one implementation signature that must be compatible with all of them and contains the actual logic. Callers only see the overload signatures, so TypeScript picks the first matching one and infers a specific return type, while the broader implementation signature stays hidden. This gives callers accurate typing that a single flexible signature could not express.
- Precise return types per argument shape
- Better editor autocomplete and hints
- Clearer public API than a union return
- Catches invalid argument combinations
- Keeps one implementation behind many signatures
AI Mentor Explanation
Function overloads are like a captain who reacts differently depending on what you hand them: give the bowler a new ball and they set an attacking field, give them the old ball and they set a defensive one. Same captain, but the response is precisely matched to the input rather than a vague one-size-fits-all plan.
Step-by-Step Explanation
Step 1
Declare overload signatures
Write two or more headerless signatures describing each valid argument-to-return mapping.
Step 2
Write the implementation signature
Add one signature broad enough to accept all overloads; this one carries the body.
Step 3
Keep it compatible
Ensure the implementation signature's parameters and return type are assignable from every overload.
Step 4
Branch inside the body
Inspect arguments at runtime (typeof, length) to handle each overloaded case.
Step 5
Call with specific arguments
Callers match one overload and receive its precise return type, not the implementation signature.
What Interviewer Expects
- The difference between overload signatures and the implementation signature
- That the implementation signature is not directly callable
- How TypeScript resolves the first matching overload
- When overloads beat a single union-typed signature
- A correct example with distinct return types
Common Mistakes
- Making the implementation signature incompatible with an overload
- Expecting the implementation signature to be visible to callers
- Using overloads where a union or generic would be simpler
- Ordering overloads so a broad one shadows a specific one
Best Answer (HR Friendly)
“Function overloads let one function advertise several ways to call it, each with its own precise result. TypeScript then picks the matching description for how you called it, giving you accurate hints and catching wrong argument combinations early.”
Code Example
function parseInput(value: string): string[];
function parseInput(value: number): number;
function parseInput(value: string | number): string[] | number {
if (typeof value === 'string') {
return value.split(',');
}
return value * 2;
}
const tokens = parseInput('a,b,c'); // tokens: string[]
const doubled = parseInput(21); // doubled: numberFollow-up Questions
- Why can callers not invoke the implementation signature directly?
- How does overload resolution order affect which signature matches?
- When would a generic function be better than overloads?
- Can you overload methods inside a class or interface?
- How do overloads interact with optional and rest parameters?
MCQ Practice
1. Which signature contains the actual function body?
Only the implementation signature has a body; the overload signatures are headerless declarations callers see.
2. What must be true of the implementation signature?
The implementation signature must be broad enough to accept every overload's parameters and return types.
3. How does TypeScript pick an overload?
Resolution scans overloads top to bottom and selects the first one whose parameters match the call.
Flash Cards
How many bodies do overloads have? — One — only the implementation signature has a body; the overload signatures are headerless.
Is the implementation signature callable? — No, callers only see the overload signatures; the implementation signature stays hidden.
Overloads vs union return? — Overloads tie a specific input shape to a specific return type; a union return loses that precision.
How is an overload chosen? — TypeScript selects the first overload whose parameter list matches the call site.