Advanced Types 🧬

1. Unions, Intersections & Literal Types

A union type, written A | B, means a value is one of several types — like an id that could be a string or a number. A literal type goes further and pins a value to an exact value, so "up" | "down" allows only those two strings. An intersection, written A & B, does the opposite of a union: the value must have everything from both types combined.

This is TypeScript-only syntax (it disappears when the code runs), so read it here rather than running it:

// UNION (A | B): the value is ONE of these types.
type Id = string | number;          // an id can be text OR a number
let userId: Id = "abc123";          // ok
userId = 42;                        // also ok
// userId = true;                   // ❌ boolean is not in the union

// LITERAL types: the value must be one EXACT value.
type Direction = "up" | "down" | "left" | "right";
let move: Direction = "up";         // ok — one of the four allowed strings
// move = "north";                  // ❌ "north" is not allowed

// INTERSECTION (A & B): the value has EVERYTHING from both types.
type Name   = { name: string };
type Age    = { age: number };
type Person = Name & Age;           // must have BOTH name AND age
const p: Person = { name: "Ada", age: 36 };   // ok

A handy way to remember it: union uses the OR bar | and gives you fewer guarantees (you don't know which type yet); intersection uses the AND symbol & and gives you more (you get all properties at once).

2. Type Narrowing & Guards

Once a value is a union, you can't immediately call methods that only exist on one member — TypeScript will stop you. Narrowing is the act of proving, with a runtime check, which type you actually have. Three everyday guards do most of the work: typeof for primitives, in for "does this object have that property", and instanceof for classes. Read this worked example, run it, then you'll write your own.

// In TypeScript a value can be a UNION like (string | number).
// Before you use type-specific methods, you must NARROW it to one type.
// These checks are normal JavaScript — TS just tracks the result for you.

function describe(value) {
  // typeof narrows primitives: "string", "number", "boolean"
  if (typeof value === "string") {
    // Here TS knows value is a string -> .toUpperCase() is safe
    return "text: " + value.toUpperCase();
  }
  if (typeof value === "number") {
    // Here TS k
...

Your turn. The function below already has its structure — just fill in the two blanks marked ___ using the hints, then run it and check the output.

// 🎯 YOUR TURN — fill in the blanks marked ___ then press "Run".
// formatId accepts a (string | number) and returns a tidy label.

function formatId(id) {
  // 1) Narrow to STRING: check the typeof id
  if (typeof id === ___) {        // 👉 the word "string" in quotes
    // strings get an "#" prefix and uppercase
    return "#" + id.toUpperCase();
  }

  // 2) Otherwise it's a number — pad it to look like an order id
  // 👉 use id.toString() to turn the number into text
  return "ORDER-" + _
...

3. Discriminated Unions (the pro pattern)

The cleanest way to model "this is one of several shapes" is a discriminated union: every member shares one common property — the discriminant, usually a literal like status: "loading". When you check that property in a switch, TypeScript narrows to the exact shape and lets you safely reach the fields unique to that branch. This single pattern replaces a pile of optional fields and if checks.

// DISCRIMINATED UNION — the cleanest way to model "one of several shapes".
// Each shape shares a common literal tag (here: "status").
// Checking that tag narrows to the exact shape, with its own fields.

// In TS these are the types:
//   type State =
//     | { status: "loading" }
//     | { status: "success"; data: string[] }
//     | { status: "error";   message: string };

function render(state) {
  switch (state.status) {          // the discriminant
    case "loading":
      return "⏳ L
...

Now you try. Finish the payment handler by naming the discriminant property and returning the cash message. Fill in the two blanks:

// 🎯 YOUR TURN — finish the discriminated union handler.
// Each payment object has a "method" tag: "card" or "cash".
//
// TS types (for reference):
//   type Payment =
//     | { method: "card"; last4: string }
//     | { method: "cash"; amount: number };

function describePayment(payment) {
  // 1) Switch on the discriminant property
  switch (payment.___) {          // 👉 the tag property name: method
    case "card":
      // 'last4' only exists on the card shape
      return "Card ending 
...

4. Generics & Constraints

A generic is a type variable — written <T> — that lets one function work with any type while keeping it type-safe. You don't lose information: if you pass a string in, you get a string back, not a vague "any". A constraint, written T extends ..., narrows what T is allowed to be, so you can safely use the properties the constraint promises. This is TypeScript-only syntax, so read it here:

// A GENERIC function works for ANY type T — you pick T when you call it.
function identity<T>(value: T): T {
  return value;                     // returns exactly the type you passed in
}
const a = identity<string>("hi");   // a is string
const b = identity(42);             // T inferred as number — no <> needed

// A CONSTRAINT (T extends ...) limits what T can be.
// Here T must at least have a .length, so .length is safe to read.
function logLength<T extends { length: number }>(item: T): T {
  console.log(item.length);
  return item;
}
logLength("hello");                 // ok — strings have .length (5)
logLength([1, 2, 3]);               // ok — arrays have .length (3)
// logLength(42);                   // ❌ number has no .length

Think of <T> as a blank you fill in at the call site. Most of the time TypeScript infers it for you from the argument, so you rarely type the angle brackets yourself.

5. The Essential Utility Types

TypeScript ships with built-in utility types that reshape an existing type so you never repeat yourself. The six you'll reach for daily: Partial (all optional), Required (all required), Pick (keep some), Omit (drop some), Record (build a key→value map), and Readonly (freeze it). Define your type once, then derive the variations:

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

// Partial<T> — every property becomes optional. Perfect for updates.
type UserUpdate = Partial<User>;
// = { id?: number; name?: string; email?: string }

// Required<T> — the opposite: every optional property becomes required.
type FullUser = Required<UserUpdate>;     // back to all-required

// Pick<T, Keys> — keep ONLY the listed properties.
type UserPreview = Pick<User, "id" | "name">;
// = { id: number; name: string }

// Omit<T, Keys> — keep everything EXCEPT the listed properties.
type PublicUser = Omit<User, "email">;
// = { id: number; name: string }

// Record<Keys, Value> — build an object type from a key set + value type.
type Roles = Record<"admin" | "guest", boolean>;
// = { admin: boolean; guest: boolean }

// Readonly<T> — no property can be reassigned after creation.
type FrozenUser = Readonly<User>;
const u: FrozenUser = { id: 1, name: "Ada", email: "a@x.com" };
// u.name = "Bob";   // ❌ Cannot assign to 'name' — it is read-only

// A small "API result" helper that combines this whole lesson:
// a discriminated union + a generic <T> for the success data.
//
// TS type:
//   type Result<T> =
//     | { ok: true;  value: T }
//     | { ok: false; error: string };

// A generic function: works for a Result of ANY data type T.
function unwrap(result, fallback) {
  if (result.ok) {            // narrows to the success shape
    return result.value;     // TS knows .value is type T here
  }
  console.log("Handled error: " + re
...

// 🎯 MINI-CHALLENGE: a notification formatter
//
// You receive notifications shaped as a discriminated union on "type":
//   type Notification =
//     | { type: "message"; from: string; text: string }
//     | { type: "alert";   level: "low" | "high"; text: string };
//
// 1. Write describeNotification(n) that switches on n.type
// 2. For "message": return  "💬 {from}: {text}"
// 3. For "alert":   return  "🚨 [{level}] {text}"
// 4. Test it with both shapes below (already provided)
//
// ✅ Ex
...