Function overloads in Typescript - Step-by-Step Execution

Concept Flow - Function overloads

Call function with args

↓

Check args types/count

↓

Match to correct overload signature?

No→Error: No matching overload

Yes↓

Run implementation with args

↓

Return result

↓

End

When a function is called, TypeScript checks the arguments against declared overloads, picks the matching one, then runs the single implementation.

Execution Sample

Typescript

function combine(a: string, b: string): string;
function combine(a: number, b: number): number;
function combine(a: any, b: any) {
  return a + b;
}

const result1 = combine('Hi, ', 'there');
const result2 = combine(10, 20);

This code shows two overloads for 'combine': one for strings and one for numbers, then a single implementation that adds them.

Execution Table

Step	Call	Arguments	Overload Matched	Implementation Run	Result
1	combine('Hi, ', 'there')	a='Hi, ', b='there'	combine(a: string, b: string): string	return a + b	'Hi, there'
2	combine(10, 20)	a=10, b=20	combine(a: number, b: number): number	return a + b	30
3	combine(true, false)	a=true, b=false	No matching overload	Error	Compilation error

💡 Execution stops because the third call does not match any overload signature.

Variable Tracker

Variable	Start	After Call 1	After Call 2	After Call 3
a	undefined	'Hi, '	10	true
b	undefined	'there'	20	false
result1	undefined	'Hi, there'	N/A	N/A
result2	undefined	N/A	30	N/A

Key Moments - 2 Insights

Why does the third call cause an error even though the implementation accepts any type?

TypeScript only allows calls that match declared overload signatures, not just the implementation. The third call doesn't match any overload, so it errors (see execution_table row 3).

How does TypeScript decide which overload to use?

It checks the call arguments against each overload signature in order and picks the first match before running the implementation (see execution_table rows 1 and 2).

Visual Quiz - 3 Questions

Look at the execution table, what is the result of the first call to combine?

A 30

B Compilation error

C 'Hi, there'

D undefined

💡 Hint

Check the 'Result' column in execution_table row 1.

At which step does the function call fail due to no matching overload?

A Step 1

B Step 3

C Step 2

D No failure

💡 Hint

Look at the 'Overload Matched' column in execution_table.

If we add an overload for (boolean, boolean), what would happen at step 3?

A It would run the implementation and return a boolean result

B It would still cause a compilation error

C It would return undefined

D It would call the string overload

💡 Hint

Adding an overload matching the arguments allows the call to succeed (see concept_flow).

Concept Snapshot

Function overloads let you declare multiple call signatures for one function.
TypeScript checks calls against these signatures, not just the implementation.
Only one implementation exists, handling all cases.
Calls not matching any overload cause errors.
Use overloads to provide clear, type-safe function interfaces.

Full Transcript

Function overloads in TypeScript allow a single function to have multiple call signatures. When you call the function, TypeScript checks your arguments against these signatures to find a match. If a match is found, it runs the single implementation with your arguments. If no match is found, TypeScript gives a compilation error. For example, a function 'combine' can have overloads for strings and numbers. Calling combine with strings returns a string, with numbers returns a number. Calling with other types causes an error. This helps keep code safe and clear by controlling how functions are called.

Practice

1. What is the main purpose of function overloads in TypeScript?

easy

A. To allow a single function to handle different types of input with clear signatures

B. To create multiple functions with the same name but different implementations

C. To automatically generate function documentation

D. To enforce that functions only accept one specific type

Solution

1. Step 1: Understand function overloads concept

   Function overloads let one function have multiple type signatures to handle different input types clearly.

2. Step 2: Compare options with concept

   Only To allow a single function to handle different types of input with clear signatures correctly describes this purpose. Other options describe different or incorrect ideas.

3. Final Answer:

   To allow a single function to handle different types of input with clear signatures -> Option A

4. Quick Check:

   Function overloads = multiple input types handled clearly [OK]

Hint: Overloads = multiple input types, one function name [OK]

Common Mistakes:

• Thinking overloads create multiple separate functions
• Believing overloads generate docs automatically
• Assuming overloads restrict to one type only

2. Which of the following is the correct syntax for declaring function overloads in TypeScript?

easy

A. function foo(x: any): any; function foo(x: any) { return x; }

B. function foo(x: number | string): number | string { return x; }

C. function foo(x: number): number { } function foo(x: string): string { }

D. function foo(x: number): number; function foo(x: string): string; function foo(x: any) { return x; }

Solution

1. Step 1: Identify correct overload syntax

   Overloads require multiple declarations without bodies, then one implementation with a body.

2. Step 2: Check each option

   function foo(x: number): number; function foo(x: string): string; function foo(x: any) { return x; } shows multiple signatures without bodies, then one implementation with a body. Others either combine signatures or have bodies in all declarations.

3. Final Answer:

   function foo(x: number): number; function foo(x: string): string; function foo(x: any) { return x; } -> Option D

4. Quick Check:

   Overloads = multiple signatures + one implementation [OK]

Hint: Overloads: signatures no body, one implementation with body [OK]

Common Mistakes:

• Putting function bodies in all overload declarations
• Using union types instead of overloads
• Declaring only one function signature

3. What will be the output of the following TypeScript code?

function combine(a: number, b: number): number;
function combine(a: string, b: string): string;
function combine(a: any, b: any) {
  return a + b;
}

console.log(combine(5, 10));
console.log(combine('Hi, ', 'there!'));

medium

A. '510' and 'Hi, there!'

B. 15 and 'Hithere!'

C. 15 and 'Hi, there!'

D. Error: No matching overload

Solution

1. Step 1: Analyze overload signatures and implementation

   Two overloads: one for numbers returning number, one for strings returning string. Implementation uses + operator.

2. Step 2: Evaluate console.log calls

   combine(5, 10) adds numbers: 5 + 10 = 15. combine('Hi, ', 'there!') concatenates strings: 'Hi, ' + 'there!' = 'Hi, there!'.

3. Final Answer:

   15 and 'Hi, there!' -> Option C

4. Quick Check:

   Number add = 15, String concat = 'Hi, there!' [OK]

Hint: Overloads match input types; + adds numbers or joins strings [OK]

Common Mistakes:

• Thinking + always concatenates strings only
• Expecting error due to any type in implementation
• Confusing output as string '510' for numbers

4. Identify the error in the following TypeScript function overload code:

function greet(name: string): string {
  return 'Hello, ' + name;
}
function greet(age: number): string {
  return 'You are ' + age + ' years old';
}

medium

A. Return types must be void for overloads

B. Function overloads must have multiple signatures without bodies, then one implementation

C. Function names must be different for overloads

D. Overloads cannot use string or number types

Solution

1. Step 1: Review overload syntax rules

   Overloads require multiple declarations without bodies, followed by one implementation with a body.

2. Step 2: Check given code

   Both functions have bodies and same name, which is invalid overload syntax.

3. Final Answer:

   Function overloads must have multiple signatures without bodies, then one implementation -> Option B

4. Quick Check:

   Overloads = signatures no body + one implementation [OK]

Hint: Overloads: only one function has body, others are signatures [OK]

Common Mistakes:

• Writing multiple functions with bodies for overloads
• Using different function names for overloads
• Thinking return type must be void

5. Given the following overloaded function signatures, which implementation correctly handles both overloads and returns the expected types?

function parseInput(input: string): number;
function parseInput(input: number): string;
// Implementation here

hard

A. function parseInput(input: any) {
if (typeof input === 'string') return Number(input);
else return input.toString();
}

B. function parseInput(input: string | number) {
return input;
}

C. function parseInput(input: string | number): string | number {
return input + 1;
}

D. function parseInput(input: any) {
return input;
}

Solution

1. Step 1: Understand overload signatures

   Input string returns number; input number returns string.

2. Step 2: Check each implementation

   function parseInput(input: any) { if (typeof input === 'string') return Number(input); else return input.toString(); } checks input type and converts accordingly, matching overloads. Others either return input unchanged or perform invalid operations.

3. Final Answer:

   function parseInput(input: any) { if (typeof input === 'string') return Number(input); else return input.toString(); } -> Option A

4. Quick Check:

   Type check + convert = correct overload implementation [OK]

Hint: Check input type, convert to match overload return type [OK]

Common Mistakes:

• Ignoring input type and returning input directly
• Using union types without type checks
• Returning wrong types for given inputs