Chai aur TypeScript: Understanding Unions & Any

In real-world application development, variable values are rarely completely static. Data formats shift between numeric IDs and string labels, API status requests transition across lifecycle states, and variable assignments may depend on runtime conditional execution.

TypeScript provides Union Types to model multi-state logic with pinpoint type precision, alongside the any escape hatch, which completely disables type checking. This chapter explores how to leverage union types for domain modeling, why any should be avoided in production, and how TypeScript guards against uninitialized runtime variables.

1. Why Do We Need Dynamic Type Flexibility?

When transitioning from pure JavaScript to TypeScript, developers often assume every variable must be strictly locked to a single primitive type (e.g., only number or only string). However, production APIs and user interfaces frequently deal with data that validly exists in multiple forms.

Real-Life Scenario: Subscriber Counts

Consider a social media dashboard tracking channel subscribers:

• For small channels, subscriber counts are stored as numbers: 10 or 500.
• For large channels, numbers are formatted as human-readable strings: "1M" or "10M".

If you lock the variable strictly to a number, the app breaks when handling formatted strings. If you lock it strictly to a string, numeric calculations break.

Rather than reverting to untyped JavaScript, TypeScript allows you to define a Union Type—an explicit contract declaring that a value can be one of several specified types.

2. Core Mental Model: Union Types (|)

A Union Type is declared using the pipe character (|), located above the Enter key on standard keyboards. It instructs the TypeScript compiler that a variable can hold any of the listed types.

Syntax & Usage

// Subscriber count accepting either a number or a string representation
let subs: number | string;

// Both assignments are valid:
subs = 10;     // Valid: matches type 'number'
subs = "1M";   // Valid: matches type 'string'

By explicitly declaring number | string, you retain complete type safety. TypeScript ensures that no third incompatible type (such as a boolean or object) can be assigned to subs.

3. Literal Union Types: Constraining Business Domain Values

Union types are not limited to primitive types (number, string, boolean). You can also combine string literal types to restrict a variable to a specific, predefined set of allowed values.

Example 1: API Request Statuses

An API request goes through specific lifecycle stages. Allowing arbitrary strings like "done" or "finished" introduces unpredictable bugs. Using literal union types enforces domain boundaries:

// Define allowed states for an API request
let apiRequestStatus: 'pending' | 'success' | 'error';

// Initializing with a valid state
apiRequestStatus = 'pending';

// Transitioning to another valid state
apiRequestStatus = 'success';

// ❌ Compiler Error: Type '"done"' is not assignable to type '"pending" | "success" | "error"'.
// apiRequestStatus = 'done';

// ❌ Compiler Error: Type '"hitesh"' is not assignable to type '"pending" | "success" | "error"'.
// apiRequestStatus = 'hitesh';

Clean Vertical Workflow: API State Validation

Example 2: Airline Seat Allocation

Consider an airline booking engine where passenger seats are limited to three physical locations:

// Restricting choices to valid physical seat layouts
let airlineSeat: 'aisle' | 'window' | 'middle';

// Valid assignment
airlineSeat = 'middle';
airlineSeat = 'window';

// ❌ Compiler Error: Type '"front"' is not assignable to type '"aisle" | "window" | "middle"'.
// airlineSeat = 'front';

4. IDE Productivity & Developer Experience

Beyond strict compile-time error checking, explicit literal unions transform developer ergonomics inside IDEs (such as VS Code):

1. IntelliSense Auto-Completion: Triggering auto-complete on airlineSeat = immediately displays 'aisle' | 'middle' | 'window' in a dropdown menu.
2. Refactoring & Misspelling Prevention: If another developer attempts to write 'sucess' (missing a 'c'), TypeScript immediately flags the typo before the code ever reaches testing or production environments.

Note: As codebases grow across large teams, auto-completion generated by literal unions saves hours of reading documentation to figure out acceptable string arguments.

5. The any Type: The Dangerous Escape Hatch

TypeScript includes a special type called any. When a variable is annotated or inferred as any, TypeScript completely turns off type checking for that variable.

// Explicitly opting out of type checking
let currentOrder: any;

currentOrder = "ORD-101"; // String
currentOrder = 42;        // Number
currentOrder = true;      // Boolean

Mental Model of any

Using any does not mean "The type is unknown." It means "I don't care about type safety."

Why You Should Avoid any

• Silences Compiler Safety: Defeats the fundamental purpose of using TypeScript.
• Cascading Type Decay: Variables typed as any propagate through function returns and operations, turning downstream code back into untyped JavaScript.
• Runtime Crash Risks: Calling non-existent methods (e.g., currentOrder.toUpperCase() when it holds a number) will pass compilation silently, only to crash at runtime.

Note: While rapid prototyping or incomplete third-party API integration sometimes leads developers to use any, production TypeScript code should strictly avoid it. Prefer union types or unknown instead.

6. Deep Dive: The "Used Before Being Assigned" Edge Case

A common practical issue in TypeScript occurs when declaring a variable without an initial value and assigning it conditionally inside a loop or control block.

The Naive Loop Implementation

Consider searching an array of orders to capture a target order ID ("28"):

const orders: string[] = ["12", "20", "28", "42"];
let currentOrder: string; // Declared without an initial value

for (const order of orders) {
    if (order === "28") {
        currentOrder = order;
        break;
    }
}

// ❌ Compiler Error: Variable 'currentOrder' is used before being assigned.
console.log(currentOrder);

Why Does TypeScript Flag This Error?

Even though we know "28" exists in the static array ["12", "20", "28", "42"], TypeScript analyzes execution pathways structurally.

If the if condition fails for every item in the array, currentOrder remains unassigned at runtime (evaluating to undefined). Because currentOrder was typed strictly as string (which excludes undefined), reading it triggers a compile-time safety violation.

7. Resolving Unassigned State with string | undefined

To cleanly handle variables that might not be initialized during conditional execution, incorporate undefined into the union declaration.

Correct Production Pattern

const orders: string[] = ["12", "20", "28", "42"];

// Explicitly tell TypeScript the variable may be a string OR unassigned (undefined)
let currentOrder: string | undefined;

for (const order of orders) {
    if (order === "28") {
        currentOrder = order;
        break;
    }
}

// ✅ Valid: TypeScript knows 'currentOrder' can legitimately be undefined
console.log(currentOrder); // Outputs: "28" or undefined

By explicitly adding undefined to the union type, you communicate to TypeScript that you are aware the value might remain uninitialized. This satisfies the compiler while preserving full type safety.

8. Strategy Comparison: Naive vs. Production Patterns

Summary and Key Takeaways

• Union Types (|) allow variables to hold more than one specified type (e.g., number | string), providing flexibility without giving up type safety.
• Literal Union Types restrict a variable's value to a fixed set of specific strings or numbers (e.g., 'pending' | 'success' | 'error').
• Domain Modeling: Literal unions are ideal for modeling fixed business concepts like API statuses, payment stages, or airline seat types.
• IDE Superpowers: Using literal unions automatically unlocks IDE auto-completion and prevents silent spelling errors across teams.
• Avoid any: The any type disables TypeScript's safety features. It represents a refusal to type-check rather than an unknown state.
• Initialization Protection: Declaring a variable without assigning an initial value leaves its runtime value as undefined.
• Branching Analysis: TypeScript flags unassigned variables used inside conditional statements with "Variable is used before being assigned" because execution branches cannot guarantee initialization.
• Handling Unassigned States: Resolve initialization warnings by explicitly typing variables with undefined (e.g., string | undefined).