Global augmentation in Typescript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is global augmentation in TypeScript?

Global augmentation means adding new types or members to existing global types or modules, so they are available everywhere in your project.

beginner

How do you declare a global augmentation in TypeScript?

You use the declare global block inside a module to add or extend global types or interfaces.

intermediate

Why use global augmentation instead of creating new types?

Global augmentation lets you extend existing types without rewriting or duplicating them, making your code more consistent and easier to maintain.

intermediate

What is the difference between module augmentation and global augmentation?

Module augmentation adds or changes types inside a specific module, while global augmentation changes types available everywhere in the project.

beginner

Show a simple example of global augmentation adding a property to the Window interface.

export {}; declare global { interface Window { myCustomProperty: string; } } window.myCustomProperty = "Hello!"; console.log(window.myCustomProperty); // Outputs: Hello!

Which keyword is used to start a global augmentation block in TypeScript?

A global declare

B declare global

C augment global

D module global

The correct syntax to start a global augmentation is using declare global.

Global augmentation is useful for:

A Importing external modules

B Creating new unrelated types

C Adding new properties to existing global types

D Changing JavaScript runtime behavior

Global augmentation lets you add or extend properties on existing global types, not create unrelated types or change runtime behavior.

Where should you place a global augmentation in your TypeScript project?

A In a CSS file

B In a JavaScript file

C In the main HTML file

D Inside a module file with <code>export {}</code>

Global augmentation must be inside a module file, so you usually add export {} to make the file a module.

What happens if you forget to add export {} in a global augmentation file?

A The file is treated as a script, and augmentation may not work correctly

B The augmentation works perfectly

C TypeScript throws a syntax error

D The file is ignored by the compiler

Without export {}, the file is a script, not a module, so global augmentation may not be recognized properly.

Which of these is a valid use of global augmentation?

A Adding a new method to the Array interface globally

B Changing the behavior of console.log

C Adding a new HTML tag

D Modifying CSS styles

You can add new methods or properties to global interfaces like Array using global augmentation.

Explain how to add a new property to the Window interface globally in TypeScript.

Think about using 'declare global' and interface extension.

Describe the difference between global augmentation and module augmentation in TypeScript.

Consider where the types are available after augmentation.

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