Decoding the System: TypeScript Patterns for the Enlightened Developer

// The blue pill: Living in blissful ignorance
function processData(data) {
  return data.length > 0 ? data.filter(d => d.active) : data;
}
// What is data? An array? A string? Does it have an 'active' property?
// You won't know until runtime errors expose the painful truth

// The red pill: Seeing the true nature of your code
function processData(data: Array<{active: boolean, [key: string]: any}>) {
  return data.length > 0 ? data.filter(d => d.active) : data;
}
// Now we know exactly what data is and what we can do with it

// Basic type narrowing with typeof
function processValue(value: string | number | boolean) {
  if (typeof value === "string") {
    // TypeScript knows we're in the string universe here
    return value.toUpperCase();
  } else if (typeof value === "number") {
    // And here, we've entered the number dimension
    return value.toFixed(2);
  } else {
    // In this branch of reality, value can only be boolean
    return value === true ? "YES" : "NO";
  }
}

// Advanced narrowing with discriminated unions
type SuccessResponse = {
  status: 'success';
  data: unknown;
  timestamp: number;
};

type ErrorResponse = {
  status: 'error';
  error: string;
  code: number;
};

type PendingResponse = {
  status: 'pending';
  requestId: string;
};

type ApiResponse = SuccessResponse | ErrorResponse | PendingResponse;

function handleResponse(response: ApiResponse) {
  // The 'status' property allows TypeScript to narrow to the specific type
  switch (response.status) {
    case 'success':
      // In this reality branch, TypeScript knows response is SuccessResponse
      console.log(`Success with data received at ${new Date(response.timestamp)}`);
      return processData(response.data);
      
    case 'error':
      // Here, TypeScript knows response is ErrorResponse
      console.error(`Error ${response.code}: ${response.error}`);
      return null;
      
    case 'pending':
      // And here, response is known to be PendingResponse
      console.log(`Request ${response.requestId} is still processing`);
      return scheduleCheck(response.requestId);
  }
}

interface User {
  id: number;
  name: string;
  email: string;
  password: string;
  preferences: {
    theme: 'light' | 'dark' | 'system';
    notifications: boolean;
    newsletter: boolean;
  };
}

// Extract only what you need from the system
type PublicUser = Omit<User, 'password'>;

// Create a read-only version of reality
type ImmutableUser = Readonly<User>;

// Extract a subset of the model
type UserPreferences = Pick<User, 'preferences'>;

// Make certain aspects of the model optional
type PartialPreferences = Partial<User['preferences']>;

// Map one reality to another
type UserMap = Record<string, PublicUser>;

// A container that can hold any truth
class Observable<T> {
  private value: T;
  private listeners: ((value: T) => void)[] = [];

  constructor(initialValue: T) {
    this.value = initialValue;
  }

  getValue(): T {
    return this.value;
  }

  setValue(newValue: T): void {
    if (this.value !== newValue) {
      this.value = newValue;
      this.notify();
    }
  }

  subscribe(listener: (value: T) => void): () => void {
    this.listeners.push(listener);
    listener(this.value); // Immediately call with current value
    
    // Return unsubscribe function
    return () => {
      this.listeners = this.listeners.filter(l => l !== listener);
    };
  }

  private notify(): void {
    for (const listener of this.listeners) {
      listener(this.value);
    }
  }
}

// Can contain any reality you choose
const counter = new Observable<number>(0);
const userState = new Observable<User | null>(null);
const configState = new Observable<{apiUrl: string, timeout: number}>({
  apiUrl: 'https://api.example.com',
  timeout: 3000
});

type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE';
type Endpoint = '/users' | '/posts' | '/comments';

// Combining types to create new realities
type ApiRoute = `${HttpMethod} ${Endpoint}`;
// 'GET /users' | 'GET /posts' | 'GET /comments' | 'POST /users' | etc.

// Types that adapt based on their environment
type ArrayOrSingle<T> = T extends any[] ? T : [T];

function process<T>(input: T): ArrayOrSingle<T> {
  if (Array.isArray(input)) {
    return input as ArrayOrSingle<T>;
  } else {
    return [input] as ArrayOrSingle<T>;
  }
}

// Transforming the very structure of types
type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K]
};

interface Person {
  name: string;
  age: number;
}

// Creates: { getName: () => string; getAge: () => number }
type PersonGetters = Getters<Person>;

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictBindCallApply": true,
    "strictPropertyInitialization": true,
    "noImplicitThis": true,
    "useUnknownInCatchVariables": true,
    "alwaysStrict": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "exactOptionalPropertyTypes": true
  }
}