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.