Declaration merging for interfaces in Typescript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is declaration merging in TypeScript interfaces?

Declaration merging is when TypeScript combines multiple interface declarations with the same name into a single interface, merging their members together.

beginner

Can you declare the same interface name multiple times in TypeScript?

Yes, TypeScript allows multiple declarations of the same interface name. It merges their properties into one interface.

intermediate

What happens if two merged interfaces have properties with the same name but different types?

TypeScript will produce an error because the property types conflict and cannot be merged safely.

intermediate

How does declaration merging help when working with third-party libraries?

It allows you to add new properties or methods to existing interfaces without modifying the original library code, enhancing flexibility.

beginner

Show a simple example of declaration merging with interfaces in TypeScript.

Example: interface User { name: string; } interface User { age: number; } // Merged interface User has both name and age properties.

What does TypeScript do when it finds two interface declarations with the same name?

A Merges their members into one interface

B Throws a syntax error

C Ignores the second declaration

D Creates two separate interfaces

TypeScript merges interface declarations with the same name into a single interface combining all members.

If two merged interfaces have a property with the same name but different types, what happens?

A TypeScript throws a type conflict error

B TypeScript merges them without error

C The first property type is used, the second ignored

D The second property type is used, the first ignored

TypeScript throws an error because conflicting property types cannot be merged.

Which of these is a benefit of declaration merging for interfaces?

A Automatically converts interfaces to classes

B Prevents interfaces from being extended

C Disables type checking for merged interfaces

D Allows adding properties to existing interfaces without changing original code

Declaration merging lets you extend interfaces safely without modifying original declarations.

Can declaration merging be used with classes in TypeScript?

A Yes, classes merge like interfaces

B No, classes cause errors if declared twice

C No, only interfaces and namespaces support declaration merging

D Yes, but only with abstract classes

Declaration merging works with interfaces and namespaces, not with classes.

What will the merged interface contain? interface A { x: number; } interface A { y: string; }

A Only property y

B Both properties x and y

C Only property x

D An error due to duplicate interface

The merged interface A will have both properties x and y.

Explain declaration merging for interfaces in TypeScript and why it is useful.

Think about how you can add new properties without changing original code.

Describe what happens when two interfaces with the same name have conflicting property types during declaration merging.

Consider what happens if two friends disagree on the same thing.

Practice

1. What happens when two interfaces with the same name are declared in TypeScript?

easy

A. Their properties merge into a single interface.

B. The second interface overwrites the first one.

C. A syntax error occurs due to duplicate names.

D. Only the first interface is used, others ignored.

Solution

1. Step 1: Understand interface declaration merging

   In TypeScript, interfaces with the same name combine their properties into one interface.

2. Step 2: Effect of merging

   This allows extending interfaces without overwriting or errors.

3. Final Answer:

   Their properties merge into a single interface. -> Option A

4. Quick Check:

   Declaration merging = properties combined [OK]

Hint: Same name interfaces combine properties automatically [OK]

Common Mistakes:

• Thinking second interface overwrites the first
• Expecting a syntax error on duplicate names
• Assuming only the first interface is used

2. Which of the following is the correct syntax to merge two interfaces named Person in TypeScript?

easy

A. class Person { name: string } class Person { age: number }

B. interface Person { name: string } interface Person { age: number }

C. type Person = { name: string } type Person = { age: number }

D. interface Person { name: string } type Person = { age: number }

Solution

1. Step 1: Identify valid interface merging syntax

   Only multiple interface declarations with the same name merge properties.

2. Step 2: Check each option

   interface Person { name: string } interface Person { age: number } uses two interface Person declarations, which is correct. Options B and C mix types and interfaces or duplicate types, which do not merge. class Person { name: string } class Person { age: number } uses classes, which do not merge.

3. Final Answer:

   interface Person { name: string } interface Person { age: number } -> Option B

4. Quick Check:

   Multiple interface declarations = merge [OK]

Hint: Only interfaces with same name merge, not types or classes [OK]

Common Mistakes:

• Trying to merge types instead of interfaces
• Using classes instead of interfaces
• Mixing type and interface declarations

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

interface Car { brand: string; }
interface Car { year: number; }
const myCar: Car = { brand: "Toyota", year: 2020 };
console.log(myCar.year);

medium

A. undefined

B. Runtime error

C. Compilation error

D. 2020

Solution

1. Step 1: Understand interface merging effect

   The two Car interfaces merge their properties, so Car has both brand and year.

2. Step 2: Analyze object and output

   The object myCar correctly has both properties. Logging myCar.year outputs 2020.

3. Final Answer:

   2020 -> Option D

4. Quick Check:

   Interface merge allows all properties [OK]

Hint: Merged interfaces combine properties, so all exist in object [OK]

Common Mistakes:

• Expecting a compilation error due to duplicate interface
• Thinking only first interface properties exist
• Confusing runtime and compile-time errors

4. Identify the error in the following TypeScript code that attempts interface merging:

interface User { id: number; }
interface User { name: string; }
const user: User = { id: 1 };

medium

A. Cannot assign number to 'id' property.

B. Duplicate interface declarations cause syntax error.

C. Missing property 'name' in object 'user'.

D. Interface merging does not work with 'const' declarations.

Solution

1. Step 1: Check interface merging and properties

   The two User interfaces merge, so User requires both id and name.

2. Step 2: Analyze object assignment

   The object user only has id, missing name, causing a type error.

3. Final Answer:

   Missing property 'name' in object 'user'. -> Option C

4. Quick Check:

   All merged properties required in object [OK]

Hint: Merged interfaces require all properties in objects [OK]

Common Mistakes:

• Thinking duplicate interfaces cause syntax errors
• Ignoring missing properties in merged interface
• Assuming 'const' affects interface merging

5. Given two interface declarations:

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

Which of the following objects correctly implements the merged Product interface?

hard

A. { id: 101, price: 29.99 }

B. { id: 101, description: "Book" }

C. { price: 29.99, description: "Book" }

D. { id: 101 }

Solution

1. Step 1: Combine interface properties

   The merged Product interface requires id (number) and price (number), with optional description.

2. Step 2: Check each object against required properties

   { id: 101, price: 29.99 } has id and price, valid. { id: 101, description: "Book" } misses price. { price: 29.99, description: "Book" } misses id. { id: 101 } misses price.

3. Final Answer:

   { id: 101, price: 29.99 } -> Option A

4. Quick Check:

   Required properties must be present [OK]

Hint: All required merged properties must be in object [OK]

Common Mistakes:

• Ignoring required properties when optional ones exist
• Assuming optional properties are required
• Missing required properties in object