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.