Declaring global variables in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of accessing a global variable inside a function

What is the output of this TypeScript code?

Typescript

let count = 10;
function showCount() {
  console.log(count);
}
showCount();

A 10

B undefined

C ReferenceError

D null

💡 Hint

Global variables are accessible inside functions unless shadowed.

The variable count is declared globally and accessible inside showCount. So it prints 10.

❓ Predict Output

intermediate

Effect of redeclaring a global variable inside a function

What will this code print?

Typescript

let message = "Hello";
function greet() {
  let message = "Hi";
  console.log(message);
}
greet();
console.log(message);

A

Hi
Hi

B

Hello
Hello

C

Hi
Hello

D ReferenceError

💡 Hint

Local variables with the same name shadow global ones inside functions.

The function prints the local message "Hi". Outside, the global message remains "Hello".

🔧 Debug

advanced

Why does this code cause an error?

What error does this TypeScript code produce?

Typescript

function update() {
  count = 5;
  let count = 10;
}
update();

A No error, runs fine

B ReferenceError: Cannot access 'count' before initialization

C TypeError: count is not a function

D SyntaxError: Unexpected token

💡 Hint

Variables declared with let are not hoisted like var.

The code tries to assign to count before it is declared with let, causing a ReferenceError.

❓ Predict Output

advanced

Global variable modification inside a function

What is the output of this code?

Typescript

let total = 0;
function add(value: number) {
  total += value;
}
add(5);
add(3);
console.log(total);

A NaN

B 0

C ReferenceError

D 8

💡 Hint

Functions can change global variables if they don't redeclare them.

The function adds values to the global total. After two calls, total is 8.

🧠 Conceptual

expert

Understanding global variable declaration in TypeScript modules

In a TypeScript file treated as a module, which statement correctly declares a global variable accessible across multiple files?

A Declare the variable with <code>declare global { var myVar: number; }</code> inside a <code>*.d.ts</code> file and assign it in one module.

B Declare the variable inside a function with <code>globalThis.myVar = 10;</code> without any declaration.

C Use <code>var myVar = 10;</code> inside a function to make it global.

D Use <code>let myVar = 10;</code> at the top of any module file.

💡 Hint

Global variables shared across modules require declaration merging or global augmentation.

Option A correctly uses declare global in a declaration file to extend the global scope. Other options either create local variables or do not properly declare globals.

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