Declaring global variables in Typescript - Step-by-Step Execution

Concept Flow - Declaring global variables

Start Program

↓

Declare global variable

↓

Use global variable in functions or blocks

↓

Modify or read global variable

↓

Program ends

The program starts by declaring a global variable accessible everywhere, then uses or modifies it inside functions or blocks before ending.

Execution Sample

Typescript

let count = 0;

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

increment();
increment();

This code declares a global variable 'count', then a function increments and prints it twice.

Execution Table

Step	Action	Variable 'count' Value	Output
1	Declare global variable count = 0	0
2	Call increment()	0
3	Inside increment(): count++	1
4	Inside increment(): console.log(count)	1	1
5	Call increment() again	1
6	Inside increment(): count++	2
7	Inside increment(): console.log(count)	2	2

💡 Program ends after two calls to increment(), count is 2.

Variable Tracker

Variable	Start	After 1	After 2	Final
count	0	1	2	2

Key Moments - 2 Insights

Why does the variable 'count' keep its value between function calls?

Because 'count' is declared globally (see execution_table steps 1 and 3), it is shared and updated across all calls to increment().

What happens if we declare 'count' inside the function instead?

If 'count' is declared inside increment(), it resets each call, so the value won't persist (not shown here, but compare with global declaration in step 1).

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'count' after the first increment() call?

A 2

B 0

C 1

D undefined

💡 Hint

Check execution_table row 4 where count is incremented and printed.

At which step does the variable 'count' change from 1 to 2?

A Step 6

B Step 3

C Step 2

D Step 7

💡 Hint

Look at execution_table rows 6 and 7 where count is incremented the second time.

If 'count' was declared inside the function, how would the variable_tracker change?

A count would keep increasing globally

B count would reset to 0 after each call

C count would be undefined outside the function

D count would be a constant

💡 Hint

Refer to key_moments explanation about variable scope and persistence.

Concept Snapshot

Declaring global variables in TypeScript:
- Use 'let' or 'var' outside functions
- Global variables are accessible everywhere
- Changes persist across function calls
- Avoid globals for cleaner code
- Example: let count = 0;

Full Transcript

This example shows how to declare a global variable 'count' in TypeScript using 'let'. The variable is initialized to 0 before any function runs. The function 'increment' increases 'count' by 1 and prints it. Each call to 'increment' updates the same global 'count', so the value persists and increases. The execution table traces each step, showing how 'count' changes and when output happens. Key moments clarify why the variable keeps its value between calls and what would happen if it were declared inside the function instead. The visual quiz tests understanding of these steps and variable behavior. The concept snapshot summarizes how to declare and use global variables simply and effectively.

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