Why Declaring global variables in Typescript? - Purpose & Use Cases

The Big Idea

What if one simple change could stop your program from breaking everywhere you update a value?

The Scenario

Imagine you have a big project with many files, and you want to share some information everywhere without passing it around all the time.

You try to write the same variable in every file manually, hoping it stays the same everywhere.

The Problem

This manual way is slow and confusing. If you change the variable in one place, you might forget to update it in others.

It causes mistakes and bugs because the values can get out of sync easily.

The Solution

Declaring global variables lets you create one shared variable that all parts of your program can use and update safely.

This keeps your code clean, avoids repetition, and makes it easier to manage shared information.

Before vs After

✗ Before

const userName = 'Alice'; // repeated in many files
// risk of mismatch or forgetting to update

✓ After

declare global {
  var userName: string;
}
// Now userName is shared everywhere safely

What It Enables

It enables smooth sharing of data across your whole program without messy copying or errors.

Real Life Example

Think of a game where the player's score needs to be shown on many screens. A global variable keeps the score updated everywhere instantly.

Key Takeaways

Manual copying of variables causes errors and confusion.

Global variables let you share data easily across files.

This makes your code simpler and less error-prone.

Practice

1. What is a global variable in TypeScript?

easy

A. A variable accessible anywhere in the program

B. A variable only accessible inside a function

C. A variable that cannot be changed

D. A variable declared inside a class only

Solution

1. Step 1: Understand variable scope

   Global variables are those that can be accessed from any part of the program, not limited to a function or block.

2. Step 2: Compare options

   A variable accessible anywhere in the program correctly describes a global variable. Options B, C, and D describe other types or restrictions that do not match global variables.

3. Final Answer:

   A variable accessible anywhere in the program -> Option A

4. Quick Check:

   Global variable = accessible everywhere [OK]

Hint: Globals are variables you can use anywhere in your code [OK]

Common Mistakes:

• Confusing global with local variables
• Thinking globals are immutable
• Assuming globals are only inside classes

2. Which of the following is the correct way to declare a global variable in TypeScript outside any function?

easy

A. let globalVar = 10;

B. var globalVar = 10;

C. const globalVar: number;

D. function globalVar() {}

Solution

1. Step 1: Identify global declaration syntax

   Using var outside any function declares a global variable in TypeScript.

2. Step 2: Analyze options

   var globalVar = 10; uses var correctly. let globalVar = 10; uses let which is block-scoped, not global. const globalVar: number; declares a constant without initialization, causing error. function globalVar() {} declares a function, not a variable.

3. Final Answer:

   var globalVar = 10; -> Option B

4. Quick Check:

   Use var outside functions for globals [OK]

Hint: Use var outside functions to create globals [OK]

Common Mistakes:

• Using let or const for globals outside modules
• Declaring variables without initialization
• Confusing functions with variables

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

var count = 5;
function increment() {
  count++;
}
increment();
console.log(count);

medium

A. undefined

B. 5

C. 6

D. Error

Solution

1. Step 1: Understand variable scope and mutation

   The variable count is declared globally with value 5. The function increment increases it by 1.

2. Step 2: Trace code execution

   Calling increment() changes count from 5 to 6. Then console.log(count) prints 6.

3. Final Answer:

   6 -> Option C

4. Quick Check:

   Global var incremented once = 6 [OK]

Hint: Global var changes inside functions affect output [OK]

Common Mistakes:

• Assuming count stays 5 after increment
• Thinking count is local inside function
• Expecting undefined due to scope confusion

4. Identify the error in this TypeScript code that tries to declare a global variable inside a module:

export {};
declare global {
  var message: string;
}
message = "Hello";
console.log(message);

medium

A. Missing initialization of message inside declare global

B. declare global block must be inside a module file

C. message must be declared with let or const

D. Cannot assign to message outside declare global block

Solution

1. Step 1: Understand declare global usage

   The declare global block is used to add types to global variables but does not create or assign them.

2. Step 2: Identify assignment error

   Assigning message = "Hello"; outside the block causes error because message is only declared, not defined. You must define it separately.

3. Final Answer:

   Cannot assign to message outside declare global block -> Option D

4. Quick Check:

   declare global declares types, assignment needs separate definition [OK]

Hint: declare global only declares, assign globals separately [OK]

Common Mistakes:

• Trying to assign inside declare global block
• Confusing declaration with definition
• Using let or const inside declare global

5. You want to add a global variable appName of type string in a TypeScript module and assign it the value "MyApp" so it can be used anywhere. Which is the correct way?

hard

A. declare global { var appName: string; }
globalThis.appName = "MyApp";

B. declare global { var appName: string; }
appName = "MyApp";

C. export var appName = "MyApp";

D. let appName: string = "MyApp";

Solution

1. Step 1: Declare global variable type inside module

   Use declare global block to declare the variable type for global scope.

2. Step 2: Assign value to global variable correctly

   Assign the value to globalThis.appName to define the global variable at runtime.

3. Step 3: Analyze options

   declare global { var appName: string; } globalThis.appName = "MyApp"; correctly declares and assigns the global variable. declare global { var appName: string; } appName = "MyApp"; misses assigning to globalThis. export var appName = "MyApp"; exports a module variable, not global. let appName: string = "MyApp"; declares a local variable.

4. Final Answer:

   declare global { var appName: string; } globalThis.appName = "MyApp"; -> Option A

5. Quick Check:

   declare global + globalThis assignment = global var [OK]

Hint: Use declare global plus globalThis to define globals in modules [OK]

Common Mistakes:

• Assigning globals without globalThis
• Using export instead of global declaration
• Declaring local variables instead of globals