Advanced Patterns

interface Circle { kind: "circle"; radius: number }
interface Rectangle { kind: "rectangle"; width: number; height: number }
interface Triangle { kind: "triangle"; base: number; height: number }

type Shape = Circle | Rectangle | Triangle;

function area(shape: Shape): number {
  switch (shape.kind) {
    case "circle": return Math.PI * shape.radius ** 2;
    case "rectangle": return shape.width * shape.height;
    case "triangle": return 0.5 * shape.base * shape.height;
  }
}

function describe(shape: Shape): string {
  switch (shape.kind) {
    case "circle": return `Circle with radius ${shape.radius}`;
    case "rectangle": return `${shape.width}x${shape.height} rectangle`;
    case "triangle": return `Triangle with base ${shape.base}`;
  }
}

// Exhaustive — because each function declares a return type, adding a fourth
// Shape member makes these switches fall off the end, and the compiler errors
// with TS2366 ("Function lacks ending return statement"). Drop the return
// annotation and that safety net disappears; the explicit `never`-typed
// `default` from Debugging TypeScript is the version that always errors.
const shapes: Shape[] = [
  { kind: "circle", radius: 5 },
  { kind: "rectangle", width: 10, height: 3 },
  { kind: "triangle", base: 8, height: 6 }
];

shapes.forEach(shape => {
  console.log(`${describe(shape)}: area = ${area(shape).toFixed(2)}`);
});

// State machines with discriminated unions
type RequestState =
  | { status: "idle" }
  | { status: "loading" }
  | { status: "success"; data: string[] }
  | { status: "error"; message: string };

function render(state: RequestState): string {
  switch (state.status) {
    case "idle": return "Ready to fetch";
    case "loading": return "Loading...";
    case "success": return `Got ${state.data.length} items`;
    case "error": return `Error: ${state.message}`;
  }
}

const states: RequestState[] = [
  { status: "idle" },
  { status: "loading" },
  { status: "success", data: ["a", "b", "c"] },
  { status: "error", message: "Network timeout" }
];

states.forEach(s => console.log(`[${s.status}] ${render(s)}`));

// Basic template literals
type Color = "red" | "blue" | "green";
type Size = "sm" | "md" | "lg";
type ClassName = `${Size}-${Color}`;

// ClassName = "sm-red" | "sm-blue" | "sm-green" | "md-red" | ...

const valid: ClassName = "lg-blue";
console.log(`Class: ${valid}`);

// Event handler names
type EventName = "click" | "focus" | "blur";
type HandlerName = `on${Capitalize<EventName>}`;
// HandlerName = "onClick" | "onFocus" | "onBlur"

const handlers: Record<HandlerName, () => void> = {
  onClick: () => console.log("clicked"),
  onFocus: () => console.log("focused"),
  onBlur: () => console.log("blurred")
};

Object.entries(handlers).forEach(([name, fn]) => {
  console.log(`Calling ${name}:`);
  fn();
});

// CSS property builder
type CSSProperty = "margin" | "padding";
type Direction = "top" | "right" | "bottom" | "left";
type CSSDirectional = `${CSSProperty}-${Direction}`;

const styles: Partial<Record<CSSDirectional, string>> = {
  "margin-top": "10px",
  "padding-left": "20px",
  "margin-bottom": "5px"
};

Object.entries(styles).forEach(([prop, val]) => {
  console.log(`${prop}: ${val}`);
});

// Basic conditional type
type IsString<T> = T extends string ? true : false;

type A = IsString<string>;    // true
type B = IsString<number>;    // false

// Flatten arrays
type Flatten<T> = T extends Array<infer U> ? U : T;

type C = Flatten<string[]>;   // string
type D = Flatten<number>;     // number

// Extract promise values (named Unwrap to avoid shadowing the built-in Awaited)
type Unwrap<T> = T extends Promise<infer U> ? U : T;

type E = Unwrap<Promise<string>>;  // string
type F = Unwrap<number>;           // number

// Practical: type-safe API response handler
interface ApiResponse<T> {
  data: T;
  status: number;
}

type ExtractData<T> = T extends ApiResponse<infer D> ? D : never;

type UserResponse = ApiResponse<{ name: string; email: string }>;
type UserData = ExtractData<UserResponse>; // { name: string; email: string }

// Runtime demonstration
function processResponse<T>(response: ApiResponse<T>): T {
  if (response.status >= 400) {
    throw new Error(`API error: ${response.status}`);
  }
  return response.data;
}

const response: UserResponse = {
  data: { name: "Alice", email: "alice@example.com" },
  status: 200
};

const user = processResponse(response);
console.log(`User: ${user.name} (${user.email})`);

// Distribute over unions
type ToArray<T> = T extends unknown ? T[] : never;
type G = ToArray<string | number>; // string[] | number[]

const strings: string[] = ["a", "b"];
const numbers: number[] = [1, 2];
const mixed: G = strings; // or numbers — both are valid
console.log(`Mixed: ${mixed}`);

// Without branding, these are interchangeable (bug-prone!)
// type UserId = string;
// type OrderId = string;

// With branding, they're distinct types
type Brand<T, B extends string> = T & { readonly __brand: B };

type UserId = Brand<string, "UserId">;
type OrderId = Brand<string, "OrderId">;
type Email = Brand<string, "Email">;

// Constructor functions validate and brand
function UserId(id: string): UserId {
  if (!id.startsWith("usr_")) throw new Error("Invalid user ID");
  return id as UserId;
}

function OrderId(id: string): OrderId {
  if (!id.startsWith("ord_")) throw new Error("Invalid order ID");
  return id as OrderId;
}

function Email(email: string): Email {
  if (!email.includes("@")) throw new Error("Invalid email");
  return email as Email;
}

// Functions accept only the correct branded type
function getUser(id: UserId): string {
  return `User(${id})`;
}

function getOrder(id: OrderId): string {
  return `Order(${id})`;
}

function sendEmail(to: Email, subject: string): string {
  return `Email to ${to}: ${subject}`;
}

// Usage — types prevent mixing up IDs
const userId = UserId("usr_123");
const orderId = OrderId("ord_456");
const email = Email("alice@example.com");

console.log(getUser(userId));
console.log(getOrder(orderId));
console.log(sendEmail(email, "Welcome!"));

// These would cause compile errors:
// getUser(orderId);  // Error: OrderId is not UserId
// getOrder(userId);  // Error: UserId is not OrderId
// sendEmail("plain string", "Hi"); // Error: string is not Email

console.log("\nAll branded operations succeeded!");

// Make all properties readonly
type Immutable<T> = { readonly [K in keyof T]: T[K] };

// Make all properties mutable (remove readonly)
type Mutable<T> = { -readonly [K in keyof T]: T[K] };

// Make all properties required (remove optional)
type Complete<T> = { [K in keyof T]-?: T[K] };

// Make specific properties optional
type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;

interface Config {
  readonly host: string;
  readonly port: number;
  debug?: boolean;
  logLevel?: string;
}

// Remove readonly
type MutableConfig = Mutable<Config>;

// Make everything required
type FullConfig = Complete<Config>;

// Runtime demonstration
const config: FullConfig = {
  host: "localhost",
  port: 3000,
  debug: true,
  logLevel: "info"
};

console.log("Full config:", JSON.stringify(config));

// Why the conditional inside the mapped type? Immutable<T> above adds readonly
// only to the OUTER properties — state.user would be readonly, but state.user.name
// would still be writable. Recursing through the T[K] extends object branch is
// what carries the modifier all the way down. The shallow shape is the right
// choice when you own the nesting; the deep one when the value crosses a boundary.
type DeepReadonly<T> = {
  readonly [K in keyof T]: T[K] extends object ? DeepReadonly<T[K]> : T[K];
};

interface AppState {
  user: { name: string; prefs: { theme: string } };
  items: string[];
}

const state: DeepReadonly<AppState> = {
  user: { name: "Alice", prefs: { theme: "dark" } },
  items: ["a", "b"]
};

// state.user.name = "Bob"; // Error: readonly
console.log(`State: ${state.user.name}, theme: ${state.user.prefs.theme}`);

// Your turn — the pattern above is worked, this one is not. Write Optional<T>,
// a mapped type that makes every property optional AND nullable, so that
// { name?: string | null } is a legal Optional<{ name: string }>. Two of the
// pieces are already on this page: the [K in keyof T] header and the T[K] | null
// value from the Testing lesson's Nullable. The third is the modifier that ADDS
// optionality — it is the mirror image of the -? you saw in Complete<T>.