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

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of merged namespaces with functions

What is the output of the following TypeScript code when compiled and run in JavaScript?

Typescript

namespace Utils {
  export function greet() {
    return "Hello";
  }
}

namespace Utils {
  export function farewell() {
    return "Goodbye";
  }
}

console.log(Utils.greet() + ", " + Utils.farewell() + "!");

A TypeError: Utils.farewell is not a function

B "Hello Goodbye!"

C "Hello, Goodbye!"

D SyntaxError: Duplicate namespace declaration

💡 Hint

Think about how TypeScript merges namespaces with the same name.

In TypeScript, namespaces with the same name merge their contents. Both greet and farewell functions become part of Utils, so calling Utils.greet() and Utils.farewell() works as expected.

❓ Predict Output

intermediate

Value of merged namespace property

Given the following TypeScript code, what is the value of Utils.version after execution?

Typescript

namespace Utils {
  export const version = "1.0";
}

namespace Utils {
  export const version = "2.0";
}

console.log(Utils.version);

A "2.0"

B "1.0"

C TypeError: Cannot redeclare 'version'

D undefined

💡 Hint

Later declarations overwrite earlier ones in merged namespaces.

When namespaces merge, if they export variables with the same name, the last declaration overwrites the previous one. So Utils.version is "2.0".

🔧 Debug

advanced

Why does this merged namespace code cause an error?

Consider this TypeScript code snippet. Why does it cause a compilation error?

Typescript

namespace Data {
  export interface Item {
    id: number;
  }
}

namespace Data {
  export interface Item {
    name: string;
  }
}

const item: Data.Item = { id: 1, name: "Book" };

A No error; interfaces merge and item is valid

B Error because the object literal is missing a required property

C Error because the merged interface Item has conflicting property types

D Error because interfaces with the same name cannot be merged

💡 Hint

Think about how TypeScript merges interfaces with the same name.

TypeScript merges interfaces with the same name by combining their properties. The merged interface Item has both id and name properties, so the object literal is valid.

📝 Syntax

advanced

Which option causes a syntax error in namespace merging?

Which of the following namespace declarations will cause a syntax error in TypeScript?

A

namespace N { export interface I { a: number; } }
namespace N { export interface I { b: string; } }

B

namespace N { export function f() {} }
namespace N { export function f() {} }

C

namespace N { export let x = 10; }
namespace N { let x = 20; }

D

namespace N { export const a = 1; }
namespace N { export const b = 2; }

💡 Hint

Check if duplicate exported functions with the same name cause errors.

Declaring two exported functions with the same name in merged namespaces causes a duplicate identifier error. Other options are valid because variables or interfaces merge or are scoped differently.

🚀 Application

expert

Number of properties in merged namespace object

After the following TypeScript code is compiled and run, how many enumerable properties does the object Utils have?

Typescript

namespace Utils {
  export const a = 1;
  export const b = 2;
}

namespace Utils {
  export const c = 3;
  export function d() { return 4; }
}

const keys = Object.keys(Utils);
console.log(keys.length);

A 4

B 1

C 2

D 3

💡 Hint

Functions are not enumerable properties on the namespace object.

In TypeScript, exported constants become enumerable properties on the namespace object. Exported functions are not enumerable. So keys are ['a', 'b', 'c'], length 3.

Practice

1. What does declaration merging for namespaces in TypeScript allow you to do?

easy

A. Merge classes and interfaces automatically

B. Combine multiple namespace blocks with the same name into one namespace

C. Create multiple namespaces with different names in one file

D. Prevent namespaces from being extended

Solution

1. Step 1: Understand declaration merging concept

   Declaration merging means combining multiple declarations of the same name into one.

2. Step 2: Apply to namespaces

   For namespaces, this means multiple blocks with the same namespace name merge into a single namespace.

3. Final Answer:

   Combine multiple namespace blocks with the same name into one namespace -> Option B

4. Quick Check:

   Declaration merging = Combine namespaces [OK]

Hint: Namespaces with same name merge into one combined namespace [OK]

Common Mistakes:

• Thinking namespaces with different names merge
• Confusing merging with class or interface merging
• Believing merging prevents extension

2. Which of the following is the correct syntax to merge two namespace declarations named Utils?

easy

A. namespace Utils { export function a() {} } namespace Utils { export function b() {} }

B. namespace Utils { export function a() {} } namespace Utils2 { export function b() {} }

C. namespace Utils { export function a() {} } class Utils { }

D. namespace Utils { export function a() {} } interface Utils { }

Solution

1. Step 1: Check namespace names

   Only namespaces with the exact same name merge. namespace Utils { export function a() {} } namespace Utils { export function b() {} } uses "Utils" twice.

2. Step 2: Verify syntax correctness

   namespace Utils { export function a() {} } namespace Utils { export function b() {} } correctly declares two namespace blocks with functions inside, which will merge.

3. Final Answer:

   namespace Utils { export function a() {} } namespace Utils { export function b() {} } -> Option A

4. Quick Check:

   Same namespace name + multiple blocks = merge [OK]

Hint: Use identical namespace names to merge declarations [OK]

Common Mistakes:

• Using different namespace names expecting merge
• Mixing namespace with class or interface of same name
• Incorrect syntax for namespace blocks

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

namespace Data {
  export const value = 10;
}
namespace Data {
  export function getValue() { return value; }
}
console.log(Data.getValue());

medium

A. 10

B. undefined

C. ReferenceError

D. SyntaxError

Solution

1. Step 1: Understand namespace merging

   Both namespace blocks named "Data" merge into one namespace containing both value and getValue.

2. Step 2: Evaluate function call

   getValue() returns value which is 10, so console.log prints 10.

3. Final Answer:

   10 -> Option A

4. Quick Check:

   Merged namespace members accessible = 10 [OK]

Hint: Merged namespaces share members, so functions access variables [OK]

Common Mistakes:

• Assuming separate namespaces, so value is undefined
• Expecting runtime errors due to merging
• Confusing variable scope inside merged namespaces

4. Identify the error in the following code that attempts to merge namespaces:

namespace Tools {
  export function toolA() { return 'A'; }
}
namespace Tools {
  const secret = 'hidden';
  export function toolB() { return secret; }
}

medium

A. Functions cannot be declared in merged namespaces

B. Duplicate namespace name causes syntax error

C. Cannot access non-exported 'secret' in merged namespace

D. 'secret' must be exported to be used inside toolB

Solution

1. Step 1: Check variable scope in merged namespaces

   The variable secret is declared but not exported, so it is private to its namespace block.

2. Step 2: Analyze usage of 'secret' in toolB

   Function toolB tries to return secret, but since secret is not accessible outside its block, this causes an error.

3. Final Answer:

   Cannot access non-exported 'secret' in merged namespace -> Option C

4. Quick Check:

   Non-exported members are block-scoped [OK]

Hint: Non-exported members are private to their block, not merged [OK]

Common Mistakes:

• Assuming all members merge regardless of export
• Thinking duplicate namespace names cause syntax errors
• Believing functions can't be declared in merged namespaces

5. Given two namespace declarations below, what will console.log(Shapes.area(5)); output?

namespace Shapes {
  export function area(radius: number) {
    return Math.PI * radius * radius;
  }
}
namespace Shapes {
  export function perimeter(radius: number) {
    return 2 * Math.PI * radius;
  }
  export function area(radius: number) {
    return Math.round(Math.PI * radius * radius);
  }
}
console.log(Shapes.area(5));

hard

A. 78.53981633974483

B. Error: Duplicate function name

C. NaN

D. 79

Solution

1. Step 1: Understand merging with duplicate function names

   When namespaces merge, later declarations override earlier ones for the same member name.

2. Step 2: Identify which 'area' function is used

   The second namespace redefines area with rounding. So Shapes.area(5) calls the rounded version.

3. Step 3: Calculate output

   Math.PI * 5 * 5 ≈ 78.5398, rounded is 79.

4. Final Answer:

   79 -> Option D

5. Quick Check:

   Later declarations override earlier ones [OK]

Hint: Later namespace members override earlier ones with same name [OK]

Common Mistakes:

• Expecting both functions to coexist without override
• Thinking duplicate function names cause errors
• Ignoring rounding in second area function