Module augmentation syntax in Typescript - Step-by-Step Execution

Concept Flow - Module augmentation syntax

Import or declare module

↓

Use 'declare module' with same module name

↓

Add new types, interfaces, or values inside

↓

Merge with original module

↓

Use augmented module in code

Module augmentation lets you add new types or values to an existing module by declaring the same module name again and adding new content inside.

Execution Sample

Typescript

import { User } from './user';

declare module './user' {
  interface User {
    age: number;
  }
}

const u: User = { name: 'Anna', age: 30 };

This code adds an 'age' property to the existing 'User' interface from './user' module.

Execution Table

Step	Action	Evaluation	Result
1	Import User interface from './user'	User has property 'name: string'	User interface available with 'name'
2	Declare module './user' again	Module found, ready to augment	Module augmentation started
3	Add 'age: number' property to User interface	User interface now has 'name' and 'age'	User interface augmented
4	Create constant u of type User	u must have 'name' and 'age'	u = { name: 'Anna', age: 30 } is valid
5	Use u in code	u.name = 'Anna', u.age = 30	No errors, augmentation works

💡 All steps complete, module augmentation applied successfully

Variable Tracker

Variable	Start	After Step 3	After Step 4	Final
User interface	{ name: string }	{ name: string, age: number }	{ name: string, age: number }	{ name: string, age: number }
u	undefined	undefined	{ name: 'Anna', age: 30 }	{ name: 'Anna', age: 30 }

Key Moments - 3 Insights

Why can we declare the same module name twice?

Because TypeScript merges declarations with the same module name, allowing augmentation instead of replacement, as shown in step 2 and 3.

Does augmentation change the original module file?

No, augmentation only adds types at compile time without modifying the original module code, as seen in step 3.

Why must the augmented interface include all properties when creating 'u'?

Because after augmentation, the interface expects all properties combined, so 'u' must have both 'name' and 'age' (step 4).

Visual Quiz - 3 Questions

Look at the execution table, what properties does the User interface have after step 3?

A Only 'name'

B Only 'age'

C 'name' and 'age'

D No properties

💡 Hint

Check the 'Evaluation' column at step 3 in the execution table

At which step is the constant 'u' created with both 'name' and 'age'?

A Step 3

B Step 4

C Step 2

D Step 5

💡 Hint

Look at the 'Action' column for when 'u' is created in the execution table

If we remove the augmentation block, what happens when creating 'u' with 'age' property?

A Error, 'age' is not defined in User

B 'age' becomes optional

C No error, 'age' is allowed

D User interface is empty

💡 Hint

Refer to variable_tracker showing User interface before augmentation

Concept Snapshot

Module augmentation syntax:
Use 'declare module "module-name"' to add new types or interfaces.
TypeScript merges these with the original module.
Allows extending existing types without changing original code.
Useful for adding properties or functions to third-party modules.

Full Transcript

Module augmentation in TypeScript lets you add new types or properties to an existing module by declaring the same module name again with 'declare module'. This merges your additions with the original module's types. For example, you can add an 'age' property to a 'User' interface imported from another file. The process involves importing the module, declaring the module again with the same name, adding new properties inside, and then using the augmented types in your code. This does not change the original module file but extends its types at compile time. When creating objects of the augmented type, you must include all original and added properties. This technique is helpful to extend third-party modules safely.