Declaring global variables in Typescript - Deep Dive

Overview - Declaring global variables

What is it?

Declaring global variables means creating variables that can be accessed from anywhere in your TypeScript program. These variables live outside of functions or classes, so all parts of your code can use them. They help share information across different parts of your program without passing variables around. However, they need careful handling to avoid confusion or errors.

Why it matters

Global variables exist to let different parts of a program share data easily. Without them, you would have to pass data through many layers of functions, which can be complicated and error-prone. But if used carelessly, global variables can cause bugs that are hard to find because any part of the program can change them. Understanding how to declare and use them properly helps keep your code clear and bug-free.

Where it fits

Before learning global variables, you should understand basic TypeScript variables and scopes like local variables inside functions. After this, you can learn about modules and namespaces, which help organize global variables safely. Later, you might explore advanced topics like environment variables and dependency injection for managing shared data in big projects.

Mental Model

Core Idea

A global variable is like a shared whiteboard in a room that everyone can read from and write to at any time.

Think of it like...

Imagine a family kitchen where a whiteboard hangs on the wall. Everyone in the house can write notes or read messages on it. This whiteboard is the global variable: accessible to all family members (parts of the program) without needing to pass notes individually.

┌─────────────────────────────┐
│        Global Variable       │
│  (Shared Whiteboard in Room) │
├─────────────┬───────────────┤
│ Function A  │ Function B    │
│  (Reads/Writes)│ (Reads/Writes)│
└─────────────┴───────────────┘

Build-Up - 7 Steps

1

Foundation

Understanding Variable Scope Basics

Concept: Learn what variable scope means and how local variables differ from global ones.

In TypeScript, variables declared inside a function or block are local to that area and cannot be accessed outside. For example: function greet() { let message = 'Hello'; // local variable console.log(message); } greet(); console.log(message); // Error: message is not defined Local variables keep data private to functions, unlike global variables which are accessible everywhere.

Result

Trying to access a local variable outside its function causes an error, showing the importance of scope.

Understanding scope is key to knowing why global variables are special—they break the usual boundaries of local access.

2

Foundation

Declaring Simple Global Variables

Concept: How to declare a global variable in TypeScript using the 'var' keyword outside any function or block.

You can declare a global variable by writing it outside any function or class: var globalCount = 0; function increment() { globalCount += 1; console.log(globalCount); } increment(); // prints 1 increment(); // prints 2 Here, 'globalCount' is accessible inside the function because it is global.

Result

The global variable 'globalCount' keeps its value between function calls and is accessible everywhere.

Declaring variables outside functions creates a shared space accessible by all parts of the program.

3

Intermediate

Using 'let' and 'const' for Globals

🤔Before reading on: Do you think 'let' and 'const' declared outside functions behave exactly like 'var' globals? Commit to your answer.

Concept: Learn the difference between 'var', 'let', and 'const' when declaring global variables and their scope implications.

'var' declares a global variable that becomes a property of the global object (like window in browsers). 'let' and 'const' also allow global variables but do NOT create properties on the global object. Example: var a = 1; let b = 2; const c = 3; console.log(window.a); // 1 console.log(window.b); // undefined console.log(window.c); // undefined This difference affects how globals interact with the environment.

Result

'var' globals attach to the global object, while 'let' and 'const' globals do not, changing how you access them externally.

Knowing this difference helps avoid bugs when your code interacts with browser or Node.js global objects.

4

Intermediate

Declaring Globals with 'declare' Keyword

🤔Before reading on: Do you think 'declare' creates a new variable or just tells TypeScript about an existing one? Commit to your answer.

Concept: Learn how to tell TypeScript about global variables that exist outside your code using 'declare'.

Sometimes, global variables come from outside your TypeScript code, like from a script loaded in HTML. You use 'declare' to tell TypeScript about them without creating them: // Assume 'myGlobal' is defined elsewhere declare var myGlobal: string; console.log(myGlobal); This tells TypeScript to trust that 'myGlobal' exists at runtime, avoiding errors during compilation.

Result

TypeScript compiles without error, trusting the external global variable exists at runtime.

Understanding 'declare' helps you safely use globals from other scripts or environments without redefining them.

5

Intermediate

Using Global Variables in Modules

Concept: How global variables behave differently inside modules and how to share globals safely.

In TypeScript, files with 'import' or 'export' are modules and have their own scope. Global variables declared inside modules are local to that module, not truly global. To create or access real globals in modules, you can attach variables to the global object: // In a module (globalThis as any).sharedValue = 42; console.log((globalThis as any).sharedValue); // 42 This way, you explicitly use the global object to share data.

Result

Global variables inside modules do not pollute the global scope unless attached to 'globalThis'.

Knowing module scope prevents accidental global pollution and encourages explicit global sharing.

6

Advanced

Augmenting Global Types Safely

🤔Before reading on: Can you extend the type of an existing global variable in TypeScript? Commit to your answer.

Concept: Learn how to add properties or types to existing global variables using declaration merging.

TypeScript allows you to extend global types safely by declaring modules for 'global': // global.d.ts declare global { interface Window { myCustomProperty: string; } } window.myCustomProperty = 'hello'; This lets you add new properties to global objects with type safety, avoiding errors.

Result

You can use new global properties with full TypeScript support and no type errors.

Extending global types keeps your code safe and maintainable when working with shared globals.

7

Expert

Risks and Best Practices with Globals

🤔Before reading on: Do you think using many global variables makes code easier or harder to maintain? Commit to your answer.

Concept: Understand the dangers of global variables and how experts manage them in large projects.

Global variables can cause unexpected bugs because any part of the program can change them at any time. Experts limit globals, use namespaces or modules, and prefer passing data explicitly. They also use tools like linters to warn about unwanted globals and carefully document any globals used. In complex apps, dependency injection or state management libraries replace globals for safer sharing.

Result

Proper management reduces bugs and improves code clarity and maintainability.

Knowing the risks of globals helps you write safer, cleaner code and avoid common pitfalls in big projects.

Under the Hood

Global variables in TypeScript become properties of the global object at runtime (like 'window' in browsers or 'global' in Node.js) when declared with 'var'. Variables declared with 'let' or 'const' at the top level are scoped to the module or script and do not attach to the global object. The TypeScript compiler uses type information to check code but does not change how JavaScript handles these variables at runtime. The 'declare' keyword only informs the compiler about existing globals without generating code.

Why designed this way?

JavaScript was designed with a global object to hold variables accessible everywhere, simplifying sharing but risking conflicts. TypeScript builds on this but adds stricter checks and module scopes to avoid accidental global pollution. The 'declare' keyword was introduced to allow TypeScript to work with existing JavaScript environments without redefining globals. This design balances flexibility with safety, letting developers choose how to share data.

┌───────────────────────────────┐
│       Global Object (e.g.,     │
│       window or globalThis)    │
├───────────────┬───────────────┤
│ 'var' globals │ Attached here │
│ 'let/const'   │ Not attached  │
│ Top-level in  │ Module scope  │
│ modules       │ only          │
└───────────────┴───────────────┘

TypeScript Compiler
  ↓
Type checks and 'declare' keywords
  ↓
JavaScript runtime handles variables as above

Myth Busters - 4 Common Misconceptions

Quick: Does declaring a global variable with 'let' make it a property of the global object? Commit to yes or no.

Common Belief: Declaring a global variable with 'let' makes it accessible as a property on the global object like 'var' does.

Reality: 'let' and 'const' declared at the top level do NOT become properties of the global object, unlike 'var'.

Why it matters: Assuming 'let' globals attach to the global object can cause bugs when code tries to access them via 'window' or 'globalThis' and finds 'undefined'.

Quick: Does the 'declare' keyword create a new variable at runtime? Commit to yes or no.

Common Belief: 'declare' creates a new global variable in the program.

Reality: 'declare' only tells TypeScript about an existing variable; it does not create any code or variable at runtime.

Why it matters: Misusing 'declare' can lead to runtime errors if the variable does not actually exist, causing crashes.

Quick: Are global variables always safe to use in large projects? Commit to yes or no.

Common Belief: Using global variables freely is safe and makes code simpler in big projects.

Reality: Excessive global variables cause hidden bugs and make code hard to maintain and debug in large projects.

Why it matters: Ignoring this leads to fragile codebases where changes in one place unexpectedly break others.

Quick: Does declaring a variable inside a module file without 'export' make it global? Commit to yes or no.

Common Belief: Variables declared inside a module file without 'export' are global variables.

Reality: Variables inside modules are local to that module and not global, even if not exported.

Why it matters: Assuming module variables are global can cause confusion about variable accessibility and lead to bugs.

Expert Zone

1

Global variables declared with 'var' become properties of the global object, which can be overwritten or shadowed, causing subtle bugs.

2

Using 'declare global' in TypeScript allows safe augmentation of existing global types without polluting the global namespace with new variables.

3

Modules in TypeScript create their own scope, so top-level variables are not global unless explicitly attached to 'globalThis', preventing accidental global leaks.

When NOT to use

Avoid global variables in large or complex applications where data sharing should be controlled. Instead, use module exports/imports, dependency injection, or state management libraries like Redux or MobX for predictable data flow and better maintainability.

Production Patterns

In production, global variables are often minimized. When needed, they are namespaced or attached to 'globalThis' with clear naming to avoid collisions. Declaration merging is used to extend global types safely. Linters and code reviews enforce rules to prevent accidental globals. Environment variables and configuration files replace globals for environment-specific data.

Connections

Module System

Builds-on

Understanding global variables helps grasp why modules create their own scope and how to share data safely between modules.

Dependency Injection

Alternative approach

Knowing the risks of global variables clarifies why dependency injection is preferred for managing shared data in large applications.

Shared Memory in Operating Systems

Similar pattern

Global variables in programming are like shared memory in operating systems, where multiple processes access common data, requiring careful synchronization to avoid conflicts.

Common Pitfalls

#1 Accidentally creating globals by omitting 'var', 'let', or 'const'.

Wrong approach:

function foo() {
count = 10; // no declaration keyword
}
foo();
console.log(count); // 10, but 'count' is global unintentionally

Correct approach:

function foo() {
let count = 10; // properly declared local variable
}
foo();
console.log(count); // Error: count is not defined

Root cause:

Forgetting declaration keywords causes JavaScript to create implicit globals, leading to hard-to-find bugs.

#2 Assuming 'let' globals attach to the global object.

Wrong approach:

let myVar = 5;
console.log(window.myVar); // undefined

Correct approach:

var myVar = 5;
console.log(window.myVar); // 5

Root cause:

Misunderstanding how 'let' and 'var' differ in global scope and their relation to the global object.

#3 Using 'declare' without ensuring the variable exists at runtime.

Wrong approach:

declare var externalVar: number;
console.log(externalVar); // Runtime error if externalVar is not defined

Correct approach:

// Ensure externalVar is defined in the environment before using
console.log(externalVar);

Root cause:

Confusing TypeScript's compile-time declarations with actual runtime existence.

Key Takeaways

Global variables are accessible everywhere but must be used carefully to avoid bugs and confusion.

'var' globals attach to the global object, while 'let' and 'const' do not, affecting how you access them.

The 'declare' keyword tells TypeScript about existing globals without creating new ones at runtime.

Modules create their own scope, so globals inside modules are local unless attached explicitly to the global object.

Experts limit global variables and prefer safer patterns like modules, dependency injection, and state management.