Module augmentation syntax in Typescript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is module augmentation in TypeScript?

Module augmentation is a way to add new members or modify existing ones in an already declared module without changing the original source code.

beginner

How do you start a module augmentation block in TypeScript?

You use the declare module 'module-name' syntax to open a block where you can add or change module contents.

intermediate

Can you augment a module by adding new functions? Give an example.

Yes. For example, to add a new function <code>newFunc</code> to module <code>myModule</code>:
<pre>declare module 'myModule' {
  export function newFunc(): void;
}</pre>

intermediate

What happens if you augment a module with a conflicting type or member?

TypeScript will merge compatible declarations, but if there is a conflict (like different types for the same member), it will cause a type error.

beginner

Why use module augmentation instead of editing the original module?

Because the original module might be from a library or external source you can't or shouldn't change. Augmentation lets you safely extend it.

Which keyword starts a module augmentation block in TypeScript?

A extend

B module

C declare

D augment

You start with declare module 'module-name' to augment a module.

What is the main purpose of module augmentation?

A To delete members from a module

B To create a new module

C To rename a module

D To add or modify members in an existing module

Module augmentation lets you add or change members in an existing module.

If you add a new function in module augmentation, what must you do?

A Only declare the function signature in the augmentation block

B Delete the original function

C Implement the function inside the augmentation block

D Nothing, it works automatically

You declare the function signature in augmentation; implementation is elsewhere.

What happens if two augmentations declare the same member with different types?

A TypeScript throws a type error

B TypeScript merges them without error

C The last declaration overwrites the first silently

D The compiler ignores the conflict

Conflicting types cause a type error in TypeScript.

Which scenario is best suited for module augmentation?

A Changing core library code directly

B Extending third-party library types safely

C Creating brand new modules

D Deleting unused code

Module augmentation is ideal for safely extending third-party libraries.

Explain how to use module augmentation syntax to add a new function to an existing module.

Think about how you tell TypeScript about new parts without changing original code.

Describe what happens when conflicting types are declared in module augmentation and how to avoid it.

Conflicts cause errors; be careful to match or extend types properly.

Practice

1. What is the main purpose of module augmentation in TypeScript?

easy

A. To create a new module from scratch

B. To delete types from a module

C. To add or extend types in an existing module without modifying its original source code

D. To convert JavaScript code into TypeScript

Solution

1. Step 1: Understand module augmentation purpose

   Module augmentation allows adding or extending types in existing modules without changing their original code.

2. Step 2: Compare options

   Only To add or extend types in an existing module without modifying its original source code correctly describes this purpose. Options A, C, and D describe unrelated actions.

3. Final Answer:

   To add or extend types in an existing module without modifying its original source code -> Option C

4. Quick Check:

   Module augmentation = extend existing types [OK]

Hint: Module augmentation means adding types to existing modules [OK]

Common Mistakes:

• Thinking it creates new modules
• Confusing augmentation with deleting types
• Assuming it converts JS to TS

2. Which of the following is the correct syntax to start a module augmentation for a module named "my-library"?

easy

A. module augment "my-library" { /* augmentation here */ }

B. declare module "my-library" { /* augmentation here */ }

C. augment module "my-library" { /* augmentation here */ }

D. module "my-library" augment { /* augmentation here */ }

Solution

1. Step 1: Recall correct syntax for module augmentation

   The correct syntax uses declare module "module-name" { ... } to augment a module.

2. Step 2: Check options

   Only declare module "my-library" { /* augmentation here */ } matches this syntax exactly. Others use invalid keywords or order.

3. Final Answer:

   declare module "my-library" { /* augmentation here */ } -> Option B

4. Quick Check:

   Use declare module "name" for augmentation [OK]

Hint: Start with 'declare module "module-name"' for augmentation [OK]

Common Mistakes:

• Using wrong keywords like 'augment' or 'module augment'
• Incorrect order of keywords
• Omitting 'declare'

3. Given the following code, what will be the output of console.log(myLib.newFunction());?

import * as myLib from "my-library";

declare module "my-library" {
  export function newFunction(): string;
}

myLib.newFunction = () => "Hello from augmentation!";

console.log(myLib.newFunction());

medium

A. "Hello from augmentation!"

B. TypeError: myLib.newFunction is not a function

C. undefined

D. SyntaxError

Solution

1. Step 1: Understand augmentation effect

   The module augmentation adds a new function type declaration to "my-library". Then the function is assigned an implementation.

2. Step 2: Check runtime behavior

   Calling myLib.newFunction() runs the assigned arrow function returning the string "Hello from augmentation!".

3. Final Answer:

   "Hello from augmentation!" -> Option A

4. Quick Check:

   Augmented function runs and returns string [OK]

Hint: Augmented functions can be assigned and called normally [OK]

Common Mistakes:

• Assuming augmentation adds runtime code automatically
• Expecting TypeError because function was not originally present
• Confusing type declaration with implementation

4. Identify the error in this module augmentation code:

declare module "utils" {
  export interface Config {
    timeout: number;
  }
}

declare module "utils" {
  export interface Config {
    retries: number;
  }
}

const config: Config = { timeout: 1000, retries: 3 };

medium

A. No error, code is correct

B. The interface Config is declared twice without merging

C. The module name "utils" is invalid

D. The variable config is missing import from "utils"

Solution

1. Step 1: Check interface merging

   Interfaces with the same name in module augmentation merge correctly, so no error there.

2. Step 2: Check usage of Config

   The variable config uses Config but does not import or reference it properly, causing an error.

3. Final Answer:

   The variable config is missing import from "utils" -> Option D

4. Quick Check:

   Missing import causes error, not interface duplication [OK]

Hint: Always import types before using them outside modules [OK]

Common Mistakes:

• Thinking interface redeclaration causes error
• Ignoring missing imports
• Assuming module name is invalid

5. You want to add a new method logInfo(message: string): void to the existing Logger class from a third-party module "logger-lib" without modifying its source. Which is the correct way to do this using module augmentation?

hard

A. declare module "logger-lib" {
interface Logger {
logInfo(message: string): void;
}
}
Logger.prototype.logInfo = function(message) { console.log(message); };

B. module "logger-lib" {
class Logger {
logInfo(message: string): void {}
}
}

C. declare module "logger-lib" {
class Logger {
logInfo(message: string): void {}
}
}

D. augment module "logger-lib" {
interface Logger {
logInfo(message: string): void;
}
}

Solution

1. Step 1: Use correct module augmentation syntax

   Use declare module "logger-lib" { interface Logger { ... } } to add method signature.

2. Step 2: Add method implementation to prototype

   Assign the method to Logger.prototype to add runtime behavior without modifying original source.

3. Final Answer:

   declare module "logger-lib" { interface Logger { logInfo(message: string): void; } } Logger.prototype.logInfo = function(message) { console.log(message); }; -> Option A

4. Quick Check:

   Declare interface then add method to prototype [OK]

Hint: Declare interface then add method to prototype for augmentation [OK]

Common Mistakes:

• Using 'module' instead of 'declare module'
• Declaring class instead of interface in augmentation
• Forgetting to add method implementation