Why module augmentation is needed in Typescript - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a new property to an existing module interface.

Typescript

declare module 'my-library' {
  interface Config {
    [1]: string;
  }
}

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

AconfigValue

BoldProperty

CnewProperty

DextraOption

Attempts:

3 left

💡 Hint

Common Mistakes

Using a property name that already exists in the interface.

Forgetting to use 'declare module' syntax.

Module augmentation allows you to add new properties like newProperty to existing interfaces.

2fill in blank

medium

Complete the code to correctly augment the module by adding a function.

Typescript

declare module 'my-library' {
  export function [1](): void;
}

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

AoldFunction

BnewFunction

CexistingFunction

DmainFunction

Attempts:

3 left

💡 Hint

Common Mistakes

Using a function name that already exists in the module.

Not exporting the function properly.

The function newFunction is added to the module using augmentation.

3fill in blank

hard

Fix the error in the module augmentation syntax.

Typescript

declare module 'my-library' {
  interface Config {
    newOption: string
  [1]
}

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

A}

B;

C)

D]

Attempts:

3 left

💡 Hint

Common Mistakes

Using a semicolon or parenthesis instead of a closing brace.

Forgetting to close the interface block.

The interface block must be properly closed with a curly brace }.

4fill in blank

hard

Fill both blanks to correctly augment a module by adding a new interface and exporting a function.

Typescript

declare module 'my-library' {
  interface [1] {
    enabled: boolean;
  }
  export function [2](): void;
}

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

ASettings

BConfig

CactivateFeature

DrunFeature

Attempts:

3 left

💡 Hint

Common Mistakes

Using interface names that conflict with existing ones.

Choosing function names that are not descriptive.

The interface Settings and function activateFeature are added to the module.

5fill in blank

hard

Fill all three blanks to augment a module by adding a new interface, a property, and a function.

Typescript

declare module 'my-library' {
  interface [1] {
    [2]: number;
  }
  export function [3](): void;
}

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

AOptions

Btimeout

Cinitialize

DSettings

Attempts:

3 left

💡 Hint

Common Mistakes

Using inconsistent names for interface and properties.

Not exporting the function properly.

The interface Settings is augmented with a timeout property and an initialize function is added.

Practice

1. Why do we need module augmentation in TypeScript?

easy

A. To add or fix types in existing modules without changing original code

B. To create new modules from scratch

C. To delete unused modules from a project

D. To convert JavaScript files into TypeScript files automatically

Solution

1. Step 1: Understand the purpose of module augmentation

   Module augmentation allows adding or fixing types in existing modules safely without modifying their original source code.

2. Step 2: Compare with other options

   Creating new modules, deleting modules, or converting files are unrelated to module augmentation's purpose.

3. Final Answer:

   To add or fix types in existing modules without changing original code -> Option A

4. Quick Check:

   Module augmentation = add/fix types safely [OK]

Hint: Module augmentation = safely add or fix types [OK]

Common Mistakes:

• Thinking it creates new modules
• Confusing with file conversion
• Assuming it deletes modules

2. Which syntax correctly starts a module augmentation in TypeScript?

easy

A. augment module 'module-name' { }

B. declare module 'module-name' { }

C. module augment 'module-name' { }

D. extend module 'module-name' { }

Solution

1. Step 1: Recall the correct syntax for module augmentation

   The correct syntax uses the keyword declare module 'module-name' { } to add types.

2. Step 2: Identify incorrect keywords

   Keywords like augment or extend are not valid TypeScript syntax for module augmentation.

3. Final Answer:

   declare module 'module-name' { } -> Option B

4. Quick Check:

   Syntax starts with declare module [OK]

Hint: Module augmentation starts with declare module [OK]

Common Mistakes:

• Using 'augment' or 'extend' keywords
• Omitting the declare keyword
• Using incorrect quotes or braces

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

import 'some-library';
declare module 'some-library' {
  interface Options {
    debug: boolean;
  }
}

const opts: import('some-library').Options = { debug: true };
console.log(opts.debug);

medium

A. true

B. undefined

C. Type error: Property 'debug' does not exist

D. Runtime error

Solution

1. Step 1: Understand module augmentation effect

   The code adds a new property debug to the Options interface inside 'some-library' module.

2. Step 2: Check variable initialization and output

   The variable opts is assigned an object with debug: true, so logging opts.debug prints true.

3. Final Answer:

   true -> Option A

4. Quick Check:

   Augmented property exists and logs true [OK]

Hint: Augmented types allow new properties without errors [OK]

Common Mistakes:

• Expecting type error due to missing original property
• Thinking output is undefined
• Confusing runtime and compile-time errors

4. Identify the error in this module augmentation code:

declare module 'my-lib' {
  interface Config {
    timeout: number;
  }
}

const config: Config = { timeout: 5000 };

medium

A. Cannot assign number to timeout property

B. Syntax error in declare module statement

C. Missing semicolon after interface declaration

D. Config interface is not imported or globally available

Solution

1. Step 1: Check scope of augmented interface

   The interface Config is declared inside module 'my-lib', so it is not globally visible.

2. Step 2: Analyze usage of Config variable

   The variable config uses Config without importing or referencing the module, causing a type error.

3. Final Answer:

   Config interface is not imported or globally available -> Option D

4. Quick Check:

   Augmented types need proper import or module reference [OK]

Hint: Augmented types need import or module prefix [OK]

Common Mistakes:

• Assuming interface is global automatically
• Ignoring module boundaries
• Confusing syntax errors with scope errors

5. You want to add a new method logInfo() to an existing interface Logger from a third-party module without modifying its source. How should you do it?

hard

A. Modify the third-party module source code directly to add logInfo()

B. Create a new interface named Logger with logInfo() and use it instead

C. Use module augmentation with declare module 'module-name' and add logInfo() inside Logger interface

D. Extend Logger interface in your code without module augmentation

Solution

1. Step 1: Understand the goal

   You want to add a method to an existing interface from a third-party module without changing its source code.

2. Step 2: Apply module augmentation

   Module augmentation with declare module 'module-name' lets you safely add logInfo() to the Logger interface inside the module.

3. Final Answer:

   Use module augmentation with declare module and add logInfo() inside Logger interface -> Option C

4. Quick Check:

   Module augmentation = add methods safely [OK]

Hint: Add methods via declare module, not by editing source [OK]

Common Mistakes:

• Editing third-party source directly
• Creating new interface instead of augmenting
• Extending interface without module context