Global augmentation in Typescript - Mini Project: Build & Apply

Global Augmentation in TypeScript

📖 Scenario: Imagine you are working on a TypeScript project where you want to add a new method to the built-in String type. This method will help you check if a string contains only vowels. Since you cannot change the original String type directly, you will use global augmentation to add this new method.

🎯 Goal: You will create a global augmentation for the String interface by adding a method called isOnlyVowels(). This method will return true if the string contains only vowels (a, e, i, o, u, case insensitive), and false otherwise. You will then test this method with some example strings.

📋 What You'll Learn

Create a global augmentation for the String interface

Add a method isOnlyVowels() that returns a boolean

Implement the isOnlyVowels() method to check if the string contains only vowels

Test the method with example strings and print the results

💡 Why This Matters

🌍 Real World

Global augmentation is useful when you want to extend existing libraries or built-in types without modifying their source code. For example, adding helpful utility methods to strings or arrays.

💼 Career

Many TypeScript projects require extending third-party types or built-in types safely. Knowing global augmentation helps you customize and improve code reuse while keeping type safety.

1

Create a global augmentation for the String interface

Write a declare global block and inside it, add an interface String with a method isOnlyVowels(): boolean.

Typescript

// Your code here
// Use declare global and add interface String with isOnlyVowels method

Hint

Use declare global to add new members to existing global types.

2

Implement the isOnlyVowels method on String prototype

Add an implementation for isOnlyVowels on String.prototype that returns true if the string contains only vowels (a, e, i, o, u, case insensitive), otherwise false.

Typescript

declare global {
    interface String {
        isOnlyVowels(): boolean;
    }
}

// Your code here
// Implement isOnlyVowels on String.prototype

Hint

Use a regular expression to check if the string contains only vowels.

3

Create example strings to test the isOnlyVowels method

Create three string variables: str1 with value "aeiou", str2 with value "hello", and str3 with value "AEIOU".

Typescript

declare global {
    interface String {
        isOnlyVowels(): boolean;
    }
}

String.prototype.isOnlyVowels = function(): boolean {
    return /^[aeiou]*$/i.test(this.toString());
};

// Your code here
// Create str1, str2, and str3 with exact values

Hint

Use const to create the string variables with the exact values.

4

Print the results of calling isOnlyVowels on the example strings

Write three console.log statements to print the results of str1.isOnlyVowels(), str2.isOnlyVowels(), and str3.isOnlyVowels().

Typescript

declare global {
    interface String {
        isOnlyVowels(): boolean;
    }
}

String.prototype.isOnlyVowels = function(): boolean {
    return /^[aeiou]*$/i.test(this.toString());
};

const str1 = "aeiou";
const str2 = "hello";
const str3 = "AEIOU";

// Your code here
// Print results of isOnlyVowels for str1, str2, and str3

Hint

Use console.log to print the boolean results of calling isOnlyVowels() on each string.

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