Global augmentation in Typescript

Introduction

Global augmentation lets you add new things to existing global types or modules. It helps you customize or extend code without changing original files.

You want to add new properties to built-in types like Window or Document.

You need to add extra types to a third-party library without editing its code.

You want to add global helper functions or variables with types.

You want to fix or improve types from external packages.

You want to share common types across many files without importing.

Syntax

Typescript

declare global {
  interface ExistingGlobalInterface {
    newProperty: string;
  }
}

export {}

You must use declare global inside a module (a file with at least one import or export).

Always add export {} at the end to make the file a module.

Examples

This adds a new number property myCustomValue to the global Window object.

Typescript

declare global {
  interface Window {
    myCustomValue: number;
  }
}

export {}

This adds a new method first() to all arrays to get the first item safely.

Typescript

declare global {
  interface Array<T> {
    first(): T | undefined;
  }
}

Array.prototype.first = function() {
  return this.length > 0 ? this[0] : undefined;
};

export {}

This adds a new global variable myGlobalFlag with boolean type.

Typescript

declare global {
  var myGlobalFlag: boolean;
}

export {}

Sample Program

This program adds a new property appVersion to the global window object and then prints it.

Typescript

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

window.appVersion = "1.0.3";

console.log(`App version is ${window.appVersion}`);

export {}

Important Notes

Global augmentation only works inside modules, so add export {} if needed.

Be careful not to overwrite existing types or properties accidentally.

Use global augmentation to improve type safety and avoid modifying original library code.

Summary

Global augmentation lets you add or change types on global objects or modules.

Use declare global inside a module to do this safely.

This helps customize or fix types without changing original code files.

Practice

1. What is the main purpose of declare global in TypeScript?

easy

A. To import external modules into the current file

B. To declare a new local variable inside a function

C. To safely add or modify types on global objects or modules

D. To create a new class with global scope

Solution

1. Step 1: Understand the role of declare global

   This keyword is used inside a module to extend or modify global types safely without changing original files.

2. Step 2: Compare with other options

   Options B, C, and D describe unrelated TypeScript features like local variables, imports, or classes.

3. Final Answer:

   To safely add or modify types on global objects or modules -> Option C

4. Quick Check:

   declare global = add/modify global types [OK]

Hint: Remember: declare global extends global types safely [OK]

Common Mistakes:

• Confusing declare global with import statements
• Thinking it declares local variables
• Assuming it creates new classes

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

easy

A. declare global { interface Window { customProp: string; } }

B. global declare { interface Window { customProp: string; } }

C. declare module global { interface Window { customProp: string; } }

D. module global declare { interface Window { customProp: string; } }

Solution

1. Step 1: Identify correct syntax for global augmentation

   The correct syntax uses declare global { ... } inside a module to augment global types.

2. Step 2: Check other options for syntax errors

   Options A, B, and C use incorrect order or keywords that are invalid in TypeScript.

3. Final Answer:

   declare global { interface Window { customProp: string; } } -> Option A

4. Quick Check:

   declare global { ... } is correct syntax [OK]

Hint: Use 'declare global { }' exactly to augment globals [OK]

Common Mistakes:

• Swapping 'declare' and 'global' keywords
• Using 'declare module global' incorrectly
• Missing curly braces after declare global

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

export {};
declare global {
  interface Array<T> {
    first(): T | undefined;
  }
}

Array.prototype.first = function() {
  return this.length > 0 ? this[0] : undefined;
};

const nums = [10, 20, 30];
console.log(nums.first());

medium

A. undefined

B. 30

C. Error: Property 'first' does not exist on type 'number[]'

D. 10

Solution

1. Step 1: Understand the global augmentation of Array interface

   The code adds a new method first() to all arrays returning the first element or undefined if empty.

2. Step 2: Analyze the output of calling nums.first()

   The array nums has elements [10, 20, 30], so first() returns 10, the first element.

3. Final Answer:

   10 -> Option D

4. Quick Check:

   nums.first() = 10 [OK]

Hint: Augmented methods work like normal after declaration [OK]

Common Mistakes:

• Expecting a TypeScript error without module context
• Thinking first() returns undefined always
• Confusing first element with last element

4. Identify the error in this global augmentation code and fix it:

declare global {
  interface String {
    shout(): string;
  }
}

String.prototype.shout = function() {
  return this.toUpperCase() + "!";
};

medium

A. Cannot augment String interface globally

B. Missing export {} to make file a module

C. Incorrect method name, should be 'shoutOut'

D. Prototype assignment must be inside declare global block

Solution

1. Step 1: Check module context requirement for global augmentation

   Global augmentation requires the file to be a module, so it needs an export {} or import statement.

2. Step 2: Identify missing export statement

   The code lacks export {}, so TypeScript treats it as a script, causing errors with declare global.

3. Final Answer:

   Missing export {} to make file a module -> Option B

4. Quick Check:

   File must be a module for declare global [OK]

Hint: Add 'export {}' to enable global augmentation [OK]

Common Mistakes:

• Forgetting to make file a module
• Trying to assign prototype inside declare global
• Renaming methods unnecessarily

5. You want to add a global method logInfo() to the console object that prefixes messages with '[INFO]'. Which is the correct way to augment the global Console interface and implement this method?

hard

A. export {};
declare global {
interface Console {
logInfo(message: string): void;
}
}

console.logInfo = (msg) => console.log(`[INFO] ${msg}`);

B. declare module 'console' {
interface Console {
logInfo(message: string): void;
}
}

console.logInfo = (msg) => console.log(`[INFO] ${msg}`);

C. declare global {
interface Console {
logInfo(message: string): void;
}
}

console.prototype.logInfo = function(msg) { console.log(`[INFO] ${msg}`); };

D. export {};
declare global {
interface Console {
logInfo(message: string): void;
}
}

console.prototype.logInfo = (msg) => console.log(`[INFO] ${msg}`);

Solution

1. Step 1: Correctly augment the global Console interface

   Use export {} to make the file a module, then declare global with interface Console adding logInfo.

2. Step 2: Properly assign the method to console object

   Assign console.logInfo directly, not on console.prototype because console is an object, not a class instance.

3. Final Answer:

   export {}; declare global { interface Console { logInfo(message: string): void; } } console.logInfo = (msg) => console.log(`[INFO] ${msg}`); -> Option A

4. Quick Check:

   Use declare global + direct console method assignment [OK]

Hint: Augment interface then assign method directly on console [OK]

Common Mistakes:

• Using declare module 'console' instead of declare global
• Assigning method to console.prototype (wrong for object)
• Forgetting export {} to make file a module