Global augmentation in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this code with global augmentation?

Consider the following TypeScript code that augments the global Window interface. What will be logged to the console?

Typescript

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

window.customMessage = "Hello, world!";
console.log(window.customMessage);

A Compilation error: Property 'customMessage' does not exist on type 'Window'

B TypeError: Cannot set property 'customMessage' of undefined

C "Hello, world!"

D undefined

💡 Hint

Think about how global interface augmentation adds properties to existing types.

The global augmentation adds the 'customMessage' property to the Window interface, so assigning and accessing it works without errors.

❓ Predict Output

intermediate

What error occurs when accessing an unaugmented global property?

Given this code, what error will TypeScript produce?

Typescript

console.log(window.newProperty);

// No global augmentation for 'newProperty' is declared.

A Compilation error: Property 'newProperty' does not exist on type 'Window'

B undefined

C Runtime error: Cannot read property 'newProperty' of undefined

D No error, prints 'null'

💡 Hint

Check if the property is declared in the Window interface.

TypeScript checks types at compile time and will error if you access a property not declared on the Window interface.

🔧 Debug

advanced

Why does this global augmentation cause a compilation error?

Examine the following code. Why does TypeScript report an error on the augmentation?

Typescript

declare global {
  interface Window {
    customMethod(): void;
  }
}

window.customMethod = () => {
  console.log("Hi");
};

A Error because 'window' is not declared in this scope

B Error because global augmentation must be inside a module

C Error because 'customMethod' is declared as a method but assigned as a property without a function type

D No error, code is valid

💡 Hint

Check the difference between method declarations and property assignments.

Declaring 'customMethod' as a method requires assigning a function, and assigning an arrow function is valid.

📝 Syntax

advanced

Which option correctly augments the global NodeJS Process interface?

You want to add a new property 'isDebugMode' of type boolean to the global NodeJS Process interface. Which code snippet correctly does this?

A

declare global {
  namespace NodeJS {
    interface Process {
      isDebugMode: boolean;
    }
  }
}

B

declare module 'process' {
  interface Process {
    isDebugMode: boolean;
  }
}

C

declare global {
  interface Process {
    isDebugMode: boolean;
  }
}

D

interface Process {
  isDebugMode: boolean;
}

💡 Hint

Remember the NodeJS Process interface is inside the NodeJS namespace.

The Process interface is inside the NodeJS namespace, so global augmentation must declare the namespace and interface inside it.

🚀 Application

expert

How many properties does the augmented global interface have after this code runs?

Given this global augmentation and code, how many enumerable own properties does the object 'window' have after execution?

Typescript

declare global {
  interface Window {
    propA: number;
    propB: string;
  }
}

window.propA = 10;
window.propB = "test";
window.propC = true;

const keys = Object.keys(window);

A 0

B 3

C 2

D Cannot determine

💡 Hint

Think about which properties are actually assigned and enumerable on the window object.

Even though 'propC' is not declared in the interface, it is assigned at runtime and is enumerable. So keys includes 'propA', 'propB', and 'propC'.