Declaration merging for interfaces in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of merged interface properties

What is the output of the following TypeScript code when compiled and run with Node.js (using ts-node or similar)?

Typescript

interface User {
  name: string;
}
interface User {
  age: number;
}
const user: User = { name: "Alice", age: 30 };
console.log(user);

A { name: 'Alice', age: 30 }

B TypeError: Cannot read property 'name' of undefined

C SyntaxError: Duplicate identifier 'User'

D { name: 'Alice' }

💡 Hint

Think about how TypeScript merges interface declarations with the same name.

In TypeScript, interfaces with the same name are merged. So the final User interface has both 'name' and 'age' properties. The object 'user' correctly implements both, so the console.log outputs the full object.

❓ Predict Output

intermediate

Merged interface method call output

What will be printed when running this TypeScript code?

Typescript

interface Logger {
  log(message: string): void;
}
interface Logger {
  error(message: string): void;
}
const logger: Logger = {
  log: (msg) => console.log('LOG:', msg),
  error: (msg) => console.error('ERROR:', msg)
};
logger.log('Hello');
logger.error('Oops');

A SyntaxError: Duplicate interface 'Logger'

B TypeError: logger.error is not a function

C LOG: Hello\nERROR: Oops

D LOG: Hello

💡 Hint

Interfaces with the same name combine their members.

The Logger interface merges both methods. The object implements both, so calling logger.log and logger.error prints both messages.

🔧 Debug

advanced

Why does this merged interface cause a type error?

Given the following code, why does TypeScript report an error on the variable 'person'?

Typescript

interface Person {
  name: string;
}
interface Person {
  name: number;
}
const person: Person = { name: 'Bob' };

A Because the variable 'person' is missing the 'age' property.

B Because the 'name' property has conflicting types (string and number) in merged interfaces.

C Because interfaces cannot be declared twice with the same name.

D Because the object literal is missing a type annotation.

💡 Hint

Check the types of the 'name' property in both interface declarations.

When interfaces merge, properties with the same name must have compatible types. Here, 'name' is string in one and number in the other, causing a conflict and a type error.

📝 Syntax

advanced

Which interface merging syntax is invalid?

Which of the following interface declarations will cause a TypeScript syntax error due to invalid merging?

A

interface Settings { theme: string; }
interface Settings { theme: number; }

B

interface Config { url: string; }
interface Config { timeout?: number; }

C

interface Data { id: number; }
interface Data { value: string; }

D

interface Options { debug: boolean; }
interface Options { debug: boolean; }

💡 Hint

Look for conflicting property types in the same interface name.

Option A declares 'theme' as string and number in the same interface name, causing a type conflict error. The others merge without syntax errors.

🚀 Application

expert

How many properties does the merged interface have?

Consider these interface declarations in TypeScript. How many properties does the merged interface 'Product' have?

Typescript

interface Product {
  id: number;
  name: string;
}
interface Product {
  description?: string;
  price: number;
}
interface Product {
  price: number;
  stock: number;
}

A 4

B 3

C 6

D 5

💡 Hint

Count unique property names after merging all interfaces.

The merged interface has properties: id, name, description, price, and stock. 'price' is repeated but counts once. So total 5 properties.