Why module augmentation is needed in Typescript - See It in Action

Why module augmentation is needed

📖 Scenario: Imagine you are using a library in your TypeScript project. Sometimes, you want to add new features or properties to the library's existing types without changing the original library code. This is where module augmentation helps.

🎯 Goal: You will learn how to use module augmentation to add new properties to an existing module's types safely and clearly.

📋 What You'll Learn

Create an interface with initial properties

Add a configuration variable for new property value

Use module augmentation to add a new property to the interface

Print the updated interface property value

💡 Why This Matters

🌍 Real World

Module augmentation lets you safely add new features or properties to existing types from libraries without changing their original code.

💼 Career

Many TypeScript projects use third-party libraries. Knowing module augmentation helps you extend these libraries to fit your needs while keeping type safety.

1

Create the initial interface

Create an interface called LibraryConfig with a property version of type string.

Typescript

# Your code here

Need a hint?

Use the interface keyword to define LibraryConfig with version: string.

2

Add a configuration variable

Create a constant called newFeatureEnabled and set it to true.

Typescript

declare module "lib" {
  export interface LibraryConfig {
    version: string;
  }
}
# Your code here

Need a hint?

Use const to create newFeatureEnabled and assign true.

3

Use module augmentation to add a new property

Use declare module to augment the module by adding a new optional boolean property featureEnabled to the LibraryConfig interface.

Typescript

declare module "lib" {
  export interface LibraryConfig {
    version: string;
  }
}

const newFeatureEnabled = true;
# Your code here

Need a hint?

Use declare module "lib" to augment the interface by adding featureEnabled?: boolean.

4

Print the updated property value

Create a variable config of type import("lib").LibraryConfig with version set to "1.0" and featureEnabled set to newFeatureEnabled. Then print config.featureEnabled.

Typescript

declare module "lib" {
  export interface LibraryConfig {
    version: string;
  }
}

const newFeatureEnabled = true;

declare module "lib" {
  interface LibraryConfig {
    featureEnabled?: boolean;
  }
}
# Your code here

Need a hint?

Create config with both properties and print config.featureEnabled.