Strict Mode Null Crash - strictNullChecks Prevents It

{
  "compilerOptions": {
    // Enabling 'strict' is equivalent to enabling ALL eight flags below.
    // We're spelling them out here so you can see exactly what you're getting.
    "strict": true,

    // --- What 'strict: true' implicitly sets ---

    // 1. null and undefined are NOT assignable to other types.
    //    This is the single most impactful flag.
    "strictNullChecks": true,

    // 2. Variables can't silently become 'any' when TypeScript can't infer a type.
    "noImplicitAny": true,

    // 3. 'this' in functions must have an explicit type — prevents confusing runtime errors.
    "noImplicitThis": true,

    // 4. Class properties must be assigned in the constructor (or declared with '!').
    "strictPropertyInitialization": true,

    // 5. Function parameter types are checked contravariantly (prevents subtle type holes).
    "strictFunctionTypes": true,

    // 6. .bind(), .call(), .apply() are type-checked against the original function signature.
    "strictBindCallApply": true,

    // 7. Every JS file gets 'use strict' emitted at the top automatically.
    "alwaysStrict": true,

    // 8. Catch clause variables are typed as 'unknown' instead of 'any' (TS 4.4+).
    "useUnknownInCatchVariables": true,

    // Recommended companions (not part of 'strict' but work well with it)
    "noUncheckedIndexedAccess": true,  // array[index] returns T | undefined, not just T
    "exactOptionalPropertyTypes": true // { name?: string } means string, NOT string | undefined
  }
}

// --- WITHOUT strict mode (the dangerous default) ---

// TypeScript doesn't complain here — but this function CAN return null.
// Without strictNullChecks, TypeScript believes the return type is just 'User'.
function findUserByIdUnsafe(userId: number) {
  const users = [
    { id: 1, name: 'Alice', email: 'alice@example.com' },
    { id: 2, name: 'Bob',   email: 'bob@example.com'   },
  ];
  // Array.find() returns T | undefined — but without strictNullChecks,
  // TypeScript lets you treat the result as always being T. Danger.
  return users.find(user => user.id === userId);
}

const unsafeUser = findUserByIdUnsafe(99); // User with id 99 does NOT exist
console.log(unsafeUser.name); // RUNTIME CRASH: Cannot read properties of undefined


// --- WITH strict mode (the safe, honest version) ---

interface User {
  id:    number;
  name:  string;
  email: string;
}

// With strictNullChecks active, TypeScript correctly infers the return
// type as 'User | undefined'. You're forced to handle both cases.
function findUserById(userId: number): User | undefined {
  const users: User[] = [
    { id: 1, name: 'Alice', email: 'alice@example.com' },
    { id: 2, name: 'Bob',   email: 'bob@example.com'   },
  ];
  return users.find(user => user.id === userId);
}

// TypeScript now REFUSES to compile this without a null check:
// const brokenUser = findUserById(99);
// console.log(brokenUser.name); // ERROR: Object is possibly 'undefined'

// The correct pattern — narrow the type before using it:
const safeUser = findUserById(1);
if (safeUser !== undefined) {
  // TypeScript knows safeUser is type 'User' inside this block — not 'User | undefined'
  console.log(`Found user: ${safeUser.name} (${safeUser.email})`);
} else {
  console.log('No user found with that ID.');
}

// --- noImplicitAny in action ---

// WITHOUT noImplicitAny, TypeScript silently types 'data' as 'any'.
// Type safety is completely gone for this parameter and everything downstream.
function processDataUnsafe(data) { // TS would allow this without noImplicitAny
  return data.toUpperCase(); // Could crash if 'data' is a number
}

// WITH noImplicitAny — you must declare the type. No more silent escape hatches.
function processData(data: string): string {
  // TypeScript knows this is a string — .toUpperCase() is safe and autocomplete works
  return data.toUpperCase();
}

console.log(processData('hello, world')); // Output: HELLO, WORLD

// ================================================================
// strictPropertyInitialization — Class property safety
// ================================================================

class OrderService {
  // Without strictPropertyInitialization, you could declare these and
  // forget to assign them. At runtime, they'd both be 'undefined'.
  private apiBaseUrl: string;
  private maxRetries: number;

  constructor(apiBaseUrl: string, maxRetries: number) {
    // TypeScript verifies these assignments happen here.
    // Remove either line and you get: "Property has no initializer and
    // is not definitely assigned in the constructor."
    this.apiBaseUrl   = apiBaseUrl;
    this.maxRetries   = maxRetries;
  }

  getOrderEndpoint(orderId: string): string {
    // Safe — TypeScript knows apiBaseUrl is definitely a string here
    return `${this.apiBaseUrl}/orders/${orderId}`;
  }
}

// A class that uses lazy initialization (e.g. set by a framework after construction)
class ReportGenerator {
  // The '!' (definite assignment assertion) tells TypeScript:
  // "Trust me — this WILL be assigned before it's read."
  // Use this sparingly and only when you're 100% sure.
  private templateEngine!: { render: (template: string) => string };

  // Called by a framework (e.g. Angular's ngOnInit) after construction
  initialize(engine: { render: (template: string) => string }): void {
    this.templateEngine = engine;
  }

  generateReport(template: string): string {
    return this.templateEngine.render(template);
  }
}


// ================================================================
// useUnknownInCatchVariables — Safe error handling
// ================================================================

interface ApiError {
  statusCode: number;
  message:    string;
}

// A helper that checks if a thrown value matches our ApiError shape
function isApiError(error: unknown): error is ApiError {
  // We check every property before trusting the shape
  return (
    typeof error === 'object'  &&
    error !== null             &&
    'statusCode' in error      &&
    'message' in error
  );
}

async function fetchOrderDetails(orderId: string): Promise<void> {
  try {
    // Simulating a fetch call that might throw
    const response = await fetch(`https://api.example.com/orders/${orderId}`);

    if (!response.ok) {
      // We throw a structured object, not just a string
      throw { statusCode: response.status, message: 'Order not found' } as ApiError;
    }

    const order = await response.json();
    console.log('Order details:', order);

  } catch (error) {
    // With useUnknownInCatchVariables, 'error' is typed as 'unknown'.
    // TypeScript REFUSES to compile: console.log(error.message)
    // because it doesn't know error has a .message property.

    if (isApiError(error)) {
      // Inside this block TypeScript knows 'error' is ApiError
      console.error(`API Error ${error.statusCode}: ${error.message}`);
    } else if (error instanceof Error) {
      // Standard JS Error objects (network failures, etc.)
      console.error(`Network error: ${error.message}`);
    } else {
      // Someone threw a string, number, or something else entirely
      console.error('An unexpected error occurred:', String(error));
    }
  }
}

// Quick demo of the OrderService
const orderService = new OrderService('https://api.example.com', 3);
console.log(orderService.getOrderEndpoint('ORD-4892'));

// Calling fetchOrderDetails (won't actually run without a real server)
// fetchOrderDetails('ORD-4892');

// ================================================================
// strictFunctionTypes — Contravariance
// ================================================================

interface Animal {
  name: string;
  sound: string;
}

interface Dog extends Animal {
  breed: string;
}

// Without strictFunctionTypes, you could assign an 'Dog' parameter handler
// to an 'Animal' handler slot — dangerous because the function might call
// 'breed' on an Animal that doesn't have it.

type AnimalHandler = (animal: Animal) => void;
type DogHandler    = (dog: Dog) => void;

function useHandler(handler: AnimalHandler): void {
  handler({ name: 'Generic', sound: '???' });
}

// This assignment is unsafe without strictFunctionTypes:
// const dogHandler: DogHandler = (dog: Dog) => console.log(dog.breed);
// useHandler(dogHandler); // <-- This would compile without strictFunctionTypes
//                         // but crash at runtime because breed doesn't exist.

// WITH strictFunctionTypes enabled, the assignment above is correctly rejected.

// ================================================================
// strictBindCallApply — Safe invocation methods
// ================================================================

function formatGreeting(greeting: string, name: string): string {
  return `${greeting}, ${name}!`;
}

// Without strictBindCallApply, these would compile but fail at runtime:
// formatGreeting.call(null, 'Hello');  // Missing 'name' argument!
// formatGreeting.apply(null, [42, 'World']); // Wrong type for 'greeting'!

// With strictBindCallApply enabled:
const correct = formatGreeting.call(null, 'Hello', 'World');
// const wrong = formatGreeting.call(null, 'Hello'); // ERROR: Expected 2 arguments, got 1

console.log(correct); // Output: Hello, World!


// ================================================================
// Real-world example: Event handler binding
// ================================================================

class ButtonUI {
  constructor(private label: string) {}

  onClick(event: MouseEvent): void {
    console.log(`${this.label} clicked at (${event.clientX}, ${event.clientY})`);
  }
}

const button = new ButtonUI('Submit');

// Without strictBindCallApply, you could accidentally pass the wrong arg:
// document.addEventListener('click', button.onClick.bind(button, 'extra-arg'));
// This would compile but produce a nonsensical event object.

// With strictBindCallApply, it's an error:
// document.addEventListener('click', button.onClick.bind(button, 'extra-arg'));
// ERROR: Argument of type '[ButtonUI, string]' is not assignable to '[event: MouseEvent]'

// Correct usage:
document.addEventListener('click', button.onClick.bind(button));

// ================================================================
// STEP 1: The problem noUncheckedIndexedAccess solves
// (Not in strict bundle — add it separately)
// ================================================================

const productNames: string[] = ['Laptop', 'Mouse', 'Keyboard'];

// WITHOUT noUncheckedIndexedAccess:
// TypeScript types productNames[5] as 'string' — but it's actually undefined at runtime
const firstProduct  = productNames[0]; // TypeScript says: string ✓
const missingProduct = productNames[5]; // TypeScript says: string ✗ (it's actually undefined)
// console.log(missingProduct.toUpperCase()); // RUNTIME CRASH

// WITH noUncheckedIndexedAccess:
// TypeScript correctly types productNames[n] as 'string | undefined'
// You're forced to check before using it
function getProductName(index: number): string {
  const product = productNames[index]; // Type: string | undefined

  if (product === undefined) {
    return 'Unknown Product';
  }

  return product; // Type narrowed to: string
}

console.log(getProductName(0)); // Laptop
console.log(getProductName(5)); // Unknown Product


// ================================================================
// STEP 2: Incremental migration pattern
// ================================================================

// In files not yet migrated, add this at the very top:
// // @ts-nocheck
// This suppresses ALL TypeScript errors in that file.
// It's a tactical retreat, not surrender — remove it file by file.


// ================================================================
// STEP 3: strictFunctionTypes — a subtle but important flag
// ================================================================

// This flag enforces contravariance on function parameter types.
// Here's a concrete example of the bug it prevents:

type StringHandler  = (value: string) => void;
type AnimalHandler  = (animal: { name: string; sound: string }) => void;

// Without strictFunctionTypes, TypeScript allowed assigning a more specific
// function type to a broader one — creating a silent type hole.
function processWithHandler(
  handler: (value: string) => void,
  input: string
): void {
  handler(input);
}

function uppercaseHandler(value: string): void {
  console.log(`Processed: ${value.toUpperCase()}`);
}

processWithHandler(uppercaseHandler, 'hello world');


// ================================================================
// STEP 4: A complete strict-mode tsconfig for a new project
// ================================================================

/*
{
  "compilerOptions": {
    "target":                        "ES2022",
    "module":                        "ESNext",
    "moduleResolution":              "bundler",
    "strict":                        true,
    "noUncheckedIndexedAccess":      true,
    "exactOptionalPropertyTypes":    true,
    "noImplicitReturns":             true,   // Functions must always return a value
    "noFallthroughCasesInSwitch":    true,   // switch cases must have break/return
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck":                  true
  }
}
*/

console.log(getProductName(0));
console.log(getProductName(5));

// io.thecodeforge — javascript tutorial

// Without noImplicitAny: TypeScript infers 'any' for 'items' and 'fn'
function processItems(items, fn) {
  return items.map(fn); // Runtime error if items isn't an array
}

// With noImplicitAny: Compiler screams immediately
// Parameter 'items' implicitly has an 'any' type
// Parameter 'fn' implicitly has an 'any' type

// The fix:
function processItems<T>(items: T[], fn: (item: T) => void): void {
  items.map(fn); // Now TypeScript validates the contract at compile time
}

// If you really need any, be explicit:
function legacyHandler(items: any): void {
  // I know what I'm doing (or I'm migrating, and this is a stub)
}

// io.thecodeforge — javascript tutorial

class PaymentHandler {
  private amount: number = 100;
  
  process(callback: () => void): void {
    callback();
  }
  
  logAmount(): void {
    console.log(this.amount); // 'this' is PaymentHandler instance
  }
}

const handler = new PaymentHandler();

// Without noImplicitThis: This compiles, then breaks at runtime
handler.process(handler.logAmount); // 'this' is undefined in strict mode
// Output: TypeError: Cannot read properties of undefined (reading 'amount')

// With noImplicitThis: TypeScript catches the implicit 'any' for 'this'
// The fix: use an arrow function
handler.process(() => handler.logAmount()); // Works correctly

// Or annotate 'this' explicitly in the function signature
function standaloneFunction(this: { amount: number }): void {
  console.log(this.amount);
}

// io.thecodeforge — javascript tutorial

import { z } from 'zod';

// TypeScript ensures shape—Zod ensures semantics
const UserSchema = z.object({
  email: z.string().email(),
  role: z.enum(['admin', 'viewer', 'editor'])
});

type User = z.infer<typeof UserSchema>;

function processUser(raw: unknown): User {
  // Runtime validation at the boundary
  const user = UserSchema.parse(raw);
  return user; // Now fully trusted
}

try {
  const badPayload = { email: 'notanemail', role: 'superadmin' };
  processUser(badPayload);
} catch (err) {
  console.error(err.errors);
  // [
  //   { message: 'Invalid email', path: ['email'] },
  //   { message: "Invalid enum value", path: ['role'] }
  // ]
}

// io.thecodeforge — javascript tutorial

// Step 1: Isolate worst files with @ts-nocheck
// Step 2: Fix one at a time, then remove the comment

// Before: any hell
function fetchUser(id: any): any {
  return fetch(`/users/${id}`).then(r => r.json());
}

// After: strict + unknown
interface ApiResponse {
  id: string;
  name: string | null;
  email: string;
}

async function fetchUserStrict(id: string): Promise<ApiResponse> {
  const raw: unknown = await fetch(`/users/${id}`).then(r => r.json());
  
  // Runtime check — no cheating
  if (
    typeof raw !== 'object' ||
    raw === null ||
    !('id' in raw) ||
    !('email' in raw)
  ) {
    throw new Error('Invalid API response shape');
  }
  
  return raw as ApiResponse;
}