Namespace merging in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a namespace named 'Shapes'.

Typescript

namespace [1] {
  export const pi = 3.14;
}

Drag options to blanks, or click blank then click option'

AShapes

BMath

CCircle

DGeometry

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different name than 'Shapes' causes the namespace to be unrelated.

Forgetting to use the 'namespace' keyword.

The namespace is named 'Shapes' to group related constants and types.

2fill in blank

medium

Complete the code to add a function 'area' inside the 'Shapes' namespace.

Typescript

namespace Shapes {
  export const pi = 3.14;
  export function [1](radius: number): number {
    return pi * radius * radius;
  }
}

Drag options to blanks, or click blank then click option'

Acircumference

Barea

Cperimeter

Dvolume

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong function name like 'circumference' or 'volume'.

Not exporting the function to make it accessible outside.

The function calculates the area of a circle, so it should be named 'area'.

3fill in blank

hard

Fix the error in merging two namespaces named 'Shapes'.

Typescript

namespace Shapes {
  export const pi = 3.14;
}

namespace Shapes {
  export function [1](radius: number): number {
    return Shapes.pi * radius * radius;
  }
}

Drag options to blanks, or click blank then click option'

Aarea

Bradius

Cdiameter

Dcircumference

Attempts:

3 left

💡 Hint

Common Mistakes

Using different namespace names prevents merging.

Naming the function incorrectly.

To merge namespaces, both must have the same name 'Shapes'. The function inside the second namespace should be 'area' to calculate the circle's area.

4fill in blank

hard

Fill both blanks to create a merged namespace 'Shapes' with a constant and a function.

Typescript

namespace [1] {
  export const [2] = 3.14;
}

namespace Shapes {
  export function area(radius: number): number {
    return Shapes.pi * radius * radius;
  }
}

Drag options to blanks, or click blank then click option'

AShapes

BCircle

Cpi

Dradius

Attempts:

3 left

💡 Hint

Common Mistakes

Using different namespace names prevents merging.

Using a wrong constant name breaks the calculation.

The first namespace must be named 'Shapes' to merge with the second. The constant inside should be 'pi' to be used in the area function.

5fill in blank

hard

Fill all three blanks to create a merged namespace 'Shapes' with a constant, a function, and a nested namespace.

Typescript

namespace [1] {
  export const [2] = 3.14;
  export function area(radius: number): number {
    return pi * radius * radius;
  }
  export namespace [3] {
    export function circumference(radius: number): number {
      return 2 * Shapes.pi * radius;
    }
  }
}

Drag options to blanks, or click blank then click option'

AShapes

Bpi

CCircle

DGeometry

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names breaks the namespace structure.

Forgetting to export nested namespaces or constants.

The outer namespace is 'Shapes'. The constant is 'pi'. The nested namespace is 'Circle' to group circle-related functions.

Practice

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

easy

A. The second namespace overwrites the first one.

B. They merge into a single namespace combining all members.

C. A compile-time error occurs due to duplicate namespace names.

D. Only the first namespace is used; the second is ignored.

Solution

1. Step 1: Understand namespace merging concept

   TypeScript allows multiple namespace declarations with the same name to combine their members into one.

2. Step 2: Effect of merging

   All functions, variables, or types inside these namespaces become part of a single namespace accessible together.

3. Final Answer:

   They merge into a single namespace combining all members. -> Option B

4. Quick Check:

   Namespace merging = combined members [OK]

Hint: Same namespace names combine their contents automatically [OK]

Common Mistakes:

• Thinking second namespace replaces the first
• Expecting a compile error for duplicate namespaces
• Assuming namespaces remain separate

2. Which of the following is the correct syntax to export a function inside a namespace for external use?

easy

A. namespace MySpace { export function greet() { return 'Hi'; } }

B. namespace MySpace { public function greet() { return 'Hi'; } }

C. namespace MySpace { export greet() { return 'Hi'; } }

D. namespace MySpace { function greet() { return 'Hi'; } }

Solution

1. Step 1: Identify export keyword usage

   To make a function accessible outside the namespace, it must be marked with export.

2. Step 2: Check syntax correctness

   Only namespace MySpace { export function greet() { return 'Hi'; } } correctly uses export function greet() inside the namespace.

3. Final Answer:

   namespace MySpace { export function greet() { return 'Hi'; } } -> Option A

4. Quick Check:

   Export keyword needed for external access [OK]

Hint: Use 'export' before function to share outside namespace [OK]

Common Mistakes:

• Omitting 'export' keyword
• Using 'public' keyword which is invalid in namespaces
• Incorrect export syntax without 'function' keyword

3. Consider the following code:

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

What is the output when this code runs?

medium

A. 20

B. 10

C. undefined

D. Runtime error

Solution

1. Step 1: Understand namespace merging effect

   Both namespace blocks named 'Alpha' merge, so value and getValue are in the same namespace.

2. Step 2: Evaluate function output

   getValue() returns value * 2, which is 10 * 2 = 20.

3. Final Answer:

   20 -> Option A

4. Quick Check:

   Namespace members combined, output = 20 [OK]

Hint: Merged namespaces share all exported members [OK]

Common Mistakes:

• Thinking namespaces are separate causing undefined
• Expecting runtime error due to multiple declarations
• Confusing output with original value

4. Identify the error in this code snippet:

namespace Beta {
  export let count = 5;
}
namespace Beta {
  let count = 10;
  export function showCount() { return count; }
}
console.log(Beta.showCount());

medium

A. Function 'showCount' cannot access 'count' declared outside.

B. Cannot declare 'count' twice in the same namespace.

C. Missing 'export' keyword on the second 'count'.

D. The inner 'count' shadows the exported 'count', causing unexpected output.

Solution

1. Step 1: Analyze variable declarations in merged namespace

   The second namespace declares a local count without export, which shadows the exported count from the first namespace.

2. Step 2: Effect on function output

   showCount() returns the inner count (10), not the exported one (5), which may be unexpected.

3. Final Answer:

   The inner 'count' shadows the exported 'count', causing unexpected output. -> Option D

4. Quick Check:

   Local variable shadows exported one [OK]

Hint: Inner variables can hide outer exported ones [OK]

Common Mistakes:

• Assuming redeclaration causes error
• Expecting 'showCount' to return 5
• Thinking export is needed on inner variable

5. You want to extend an existing namespace Utils defined in another file by adding a new exported function double that doubles a number. Which is the correct way to do this using namespace merging?

hard

A. module Utils { function double(x: number) { return x * 2; } }

B. namespace Utils { function double(x: number) { return x * 2; } }

C. namespace Utils { export function double(x: number) { return x * 2; } }

D. namespace Utils { const double = (x: number) => x * 2; }

Solution

1. Step 1: Use 'namespace' keyword to extend existing namespace

   To add members to an existing namespace, declare a new namespace block with the same name.

2. Step 2: Export the new function properly

   The function must be exported to be accessible outside the namespace.

3. Final Answer:

   namespace Utils { export function double(x: number) { return x * 2; } } -> Option C

4. Quick Check:

   Extend with 'namespace' and export function [OK]

Hint: Use 'namespace' with same name and export new members [OK]

Common Mistakes:

• Using 'module' instead of 'namespace'
• Not exporting the new function
• Declaring function without namespace