Declaring global variables in Typescript

Introduction

Global variables let you store information that many parts of your program can use. This helps share data easily across different functions or files.

When you want to keep a value accessible everywhere in your program, like a configuration setting.

When multiple functions need to read or update the same data, such as a score in a game.

When you want to share constants or settings across different files without passing them around.

When you need to keep track of a state that affects the whole app, like user login status.

Syntax

Typescript

declare global {
  var variableName: type;
}

// or simply
var variableName: type = value;

Use declare global when adding variables to the global scope in TypeScript modules.

Using var declares a global variable if done outside any function or module.

Examples

This creates a global variable count with the number 0.

Typescript

var count: number = 0;

This adds appName as a global string variable inside a module.

Typescript

declare global {
  var appName: string;
}

appName = "MyApp";

Here, isLoggedIn is global and can be changed inside functions.

Typescript

var isLoggedIn: boolean;

function login() {
  isLoggedIn = true;
}

Sample Program

This program declares a global variable globalMessage and prints it inside a function.

Typescript

var globalMessage: string = "Hello, world!";

function showMessage() {
  console.log(globalMessage);
}

showMessage();

Important Notes

Global variables can be changed from anywhere, so use them carefully to avoid bugs.

Prefer const or let inside functions or blocks to limit variable scope.

In TypeScript modules, use declare global to add variables to the global scope safely.

Summary

Global variables store data accessible everywhere in your program.

Use var outside functions or declare global in modules to create globals.

Be careful with globals to keep your code easy to understand and debug.

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