Function overloads in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of overloaded function with string input

What is the output of the following TypeScript code when calling combine('Hello', 'World')?

Typescript

function combine(a: number, b: number): number;
function combine(a: string, b: string): string;
function combine(a: any, b: any): any {
  if (typeof a === 'string' && typeof b === 'string') {
    return a + ' ' + b;
  }
  if (typeof a === 'number' && typeof b === 'number') {
    return a + b;
  }
}

console.log(combine('Hello', 'World'));

A "HelloWorld"

B "Hello World"

C undefined

D TypeError at runtime

💡 Hint

Check how the function handles string inputs and what it returns.

The function overloads define that when both inputs are strings, it returns their concatenation with a space in between. So the output is "Hello World".

❓ Predict Output

intermediate

Output of overloaded function with number input

What is the output of the following TypeScript code when calling combine(5, 10)?

Typescript

function combine(a: number, b: number): number;
function combine(a: string, b: string): string;
function combine(a: any, b: any): any {
  if (typeof a === 'string' && typeof b === 'string') {
    return a + ' ' + b;
  }
  if (typeof a === 'number' && typeof b === 'number') {
    return a + b;
  }
}

console.log(combine(5, 10));

A TypeError at runtime

B "510"

C undefined

D 15

💡 Hint

Look at how the function handles number inputs.

When both inputs are numbers, the function returns their sum, so 5 + 10 equals 15.

❓ Predict Output

advanced

Behavior when calling overloaded function with mixed types

What happens when you call combine('Hello', 5) with the following TypeScript code?

Typescript

function combine(a: number, b: number): number;
function combine(a: string, b: string): string;
function combine(a: any, b: any): any {
  if (typeof a === 'string' && typeof b === 'string') {
    return a + ' ' + b;
  }
  if (typeof a === 'number' && typeof b === 'number') {
    return a + b;
  }
}

console.log(combine('Hello', 5));

A Compilation error

B "Hello 5"

C TypeError at runtime

D undefined

💡 Hint

TypeScript overload resolution checks the call against the overload signatures, ignoring the implementation signature.

The call combine('Hello', 5) does not match any overload signature: neither (number, number) nor (string, string). TypeScript produces a compilation error: 'No overload matches this call.'

🔧 Debug

advanced

Identify the error in this overloaded function

What error will this TypeScript code produce when compiled?

Typescript

function greet(name: string): string;
function greet(age: number): string;
function greet(value: any): any {
  if (typeof value === 'string') {
    return `Hello, ${value}!`;
  } else if (typeof value === 'number') {
    return `You are ${value} years old.`;
  }
}

const result = greet(true);

A Output: 'Hello, true!'

B Runtime error: TypeError

C Compilation error: No overload matches this call

D Output: 'You are true years old.'

💡 Hint

Check the allowed argument types in the overloads and the call.

The function overloads only accept string or number, but the call uses a boolean, so TypeScript reports a compilation error.

🧠 Conceptual

expert

Why use function overloads in TypeScript?

Which of the following best explains the main benefit of using function overloads in TypeScript?

A They allow a single function to have multiple type-safe signatures for different input types.

B They automatically convert all inputs to strings before processing.

C They enable functions to run faster by compiling to optimized machine code.

D They prevent any runtime errors by catching all bugs during compilation.

💡 Hint

Think about how overloads help with input types and function behavior.

Function overloads let you define multiple ways to call a function with different input types, while keeping type safety.

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