Global augmentation in Typescript - Step-by-Step Execution

Concept Flow - Global augmentation

Declare module to augment

↓

Add new types or members

↓

Use augmented types in code

↓

Compiler merges original + augmentation

↓

Program compiles with new types

Global augmentation lets you add new types or members to existing modules or interfaces so the compiler treats them as if originally declared.

Execution Sample

Typescript

declare global {
  interface Window {
    myCustomProperty: string;
  }
}

window.myCustomProperty = "Hello";
console.log(window.myCustomProperty);

This code adds a new property to the global Window interface and then uses it.

Execution Table

Step	Action	Evaluation	Result
1	Declare global augmentation for Window interface	Adds myCustomProperty: string	Window interface now includes myCustomProperty
2	Assign 'Hello' to window.myCustomProperty	window.myCustomProperty = 'Hello'	Property set successfully
3	Log window.myCustomProperty	console.log(window.myCustomProperty)	Outputs: Hello
4	End of code	No more statements	Program ends

💡 Program ends after logging the augmented property value

Variable Tracker

Variable	Start	After Step 2	Final
window.myCustomProperty	undefined	"Hello"	"Hello"

Key Moments - 2 Insights

Why can we assign to window.myCustomProperty even though it is not originally in Window?

Because the global augmentation (Step 1) adds myCustomProperty to the Window interface, so TypeScript knows it exists.

Does global augmentation change the runtime JavaScript objects?

No, it only changes TypeScript's type system. The actual JavaScript object must have the property assigned at runtime (Step 2).

Visual Quiz - 3 Questions

Look at the execution table, what is the value of window.myCustomProperty after Step 2?

A undefined

B "Hello"

C null

D Type error

💡 Hint

Check the variable_tracker row for window.myCustomProperty after Step 2

At which step does TypeScript recognize the new property on Window?

A Step 2

B Step 3

C Step 1

D Step 4

💡 Hint

Look at the execution_table row describing the declaration of global augmentation

If we remove the global augmentation declaration, what happens when assigning window.myCustomProperty?

A TypeScript error: Property does not exist

B Runtime error

C No error, property added dynamically

D The program logs undefined

💡 Hint

Without augmentation, TypeScript does not know about myCustomProperty (see Step 1)

Concept Snapshot

Global augmentation syntax:
declare global {
  interface ExistingInterface {
    newMember: Type;
  }
}

It extends existing types globally.
Use it to add properties or methods.
TypeScript merges original + augmentation at compile time.

Full Transcript

Global augmentation in TypeScript lets you add new properties or methods to existing global types or interfaces. You write a declare global block and add members inside. This does not change runtime objects but tells TypeScript about the new members. For example, adding myCustomProperty to Window interface allows you to assign and use window.myCustomProperty without type errors. The compiler merges your additions with the original types. This is useful to extend built-in types or third-party libraries safely.