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.