Module augmentation syntax in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of module augmentation with interface merging

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

Typescript

declare module "my-module" {
  interface User {
    name: string;
  }
}

// Augmenting the module
import "my-module";
declare module "my-module" {
  interface User {
    age: number;
  }
}

const user: import("my-module").User = { name: "Alice", age: 30 };
console.log(user);

A TypeError: Cannot read property 'name' of undefined

B {"name":"Alice","age":30}

C SyntaxError: Duplicate identifier 'User'

D {"name":"Alice"}

💡 Hint

Think about how TypeScript merges interfaces in module augmentation.

TypeScript merges interface declarations with the same name inside module augmentation. The User interface will have both 'name' and 'age' properties. The object matches the merged interface, so the output is the full object with both properties.

🧠 Conceptual

intermediate

Purpose of module augmentation syntax

What is the main purpose of using module augmentation syntax in TypeScript?

A To add new exports or extend existing types in an external module without modifying its original source code

B To import all exports from a module under a new namespace

C To create a new module with the same name as an existing one, replacing it completely

D To declare global variables accessible in all modules

💡 Hint

Think about extending functionality without changing original files.

Module augmentation allows you to add new types or members to an existing module's declarations, useful for extending third-party modules safely.

🔧 Debug

advanced

Identify the error in this module augmentation

This code tries to augment a module but causes a compilation error. What is the error?

Typescript

declare module "library" {
  export function greet(): void;
}

declare module "library" {
  export const version: string;
}

// Usage
import { greet, version } from "library";
greet();
console.log(version);

A Cannot redeclare exported function 'greet' without implementation

B Module 'library' has no exported member 'version'

C Duplicate identifier 'library'

D No error, code compiles and runs fine

💡 Hint

Check if the augmentation declares implementations or only types.

Module augmentation can only add types or declarations, but cannot redeclare exported functions without implementation. The first declaration declares a function without implementation, causing an error.

📝 Syntax

advanced

Correct syntax for module augmentation

Which option shows the correct syntax to augment the 'express' module by adding a new property 'userId' of type string to the Request interface?

A

declare module express {
  interface Request {
    userId: string;
  }
}

B

module "express" {
  interface Request {
    userId: string;
  }
}

C

augment module "express" {
  interface Request {
    userId: string;
  }
}

D

declare module "express" {
  interface Request {
    userId: string;
  }
}

💡 Hint

Remember the keyword to declare module augmentation.

The correct syntax uses 'declare module "module-name"' with quotes around the module name. Other options miss 'declare' or quotes or use invalid keywords.

🚀 Application

expert

Resulting type after multiple module augmentations

Given these two separate module augmentation files for module 'config', what is the type of Config after both are loaded?

Typescript

// File 1
declare module "config" {
  interface Config {
    host: string;
  }
}

// File 2
declare module "config" {
  interface Config {
    port: number;
  }
}

// Usage
import type { Config } from "config";
const serverConfig: Config = { host: "localhost", port: 8080 };

A Config has only the last declared property: { port: number }

B Config has only the first declared property: { host: string }

C Config has both properties: { host: string; port: number }

D Config is an empty interface with no properties

💡 Hint

Think about how TypeScript merges interfaces with the same name in module augmentation.

TypeScript merges interface declarations with the same name inside the same module, so Config will have both 'host' and 'port' properties.