TypeScript Union & Intersection Types — Complete Interview Guide

Union Types — A | B

A union type means a value can be one of the listed types. TypeScript only allows you to access properties that are common to all members — you must narrow before accessing member-specific properties:

type StringOrNumber = string | number;

function double(value: StringOrNumber): StringOrNumber {
  // Only properties that exist on BOTH string AND number are accessible
  // value.toString() — OK, both have toString()
  // value.toUpperCase() — Error! number has no toUpperCase()
  // value.toFixed() — Error! string has no toFixed()

  if (typeof value === "string") {
    return value.repeat(2); // Narrowed to string — string methods available
  }
  return value * 2; // Narrowed to number — arithmetic available
}

// Literal unions — a very common pattern for enumerating options
type Direction = "north" | "south" | "east" | "west";
type Status = "idle" | "loading" | "success" | "error";
type HttpMethod = "GET" | "POST" | "PUT" | "DELETE" | "PATCH";

Discriminated Unions — The Most Powerful Pattern

Add a shared literal property to every union member to create a discriminated union. TypeScript can then narrow the entire shape based on that one property's value:

// Each member has a unique 'type' literal — this is the discriminant
type Action =
  | { type: "INCREMENT"; amount: number }
  | { type: "DECREMENT"; amount: number }
  | { type: "RESET" }
  | { type: "SET_USER"; user: User };

function reducer(state: AppState, action: Action): AppState {
  switch (action.type) {
    case "INCREMENT":
      // action: { type: "INCREMENT"; amount: number }
      return { ...state, count: state.count + action.amount };
    case "RESET":
      // action: { type: "RESET" } — no amount property accessible
      return initialState;
    case "SET_USER":
      // action: { type: "SET_USER"; user: User }
      return { ...state, user: action.user };
    default:
      return state;
  }
}

// Discriminated unions also work with if/else — the discriminant can be any literal
type Shape =
  | { kind: "circle";  radius: number }
  | { kind: "square";  side: number }
  | { kind: "rect";    width: number; height: number };

function area(s: Shape): number {
  if (s.kind === "circle") return Math.PI * s.radius ** 2;
  if (s.kind === "square") return s.side ** 2;
  return s.width * s.height; // TypeScript knows kind === "rect" here
}

Intersection Types — A & B

An intersection type means a value must simultaneously satisfy all of the listed types. The result type has all properties from all members:

interface HasId   { id: number; }
interface HasName { name: string; }
interface HasTimestamps { createdAt: Date; updatedAt: Date; }

// An intersection: must have ALL properties from ALL three interfaces
type BaseEntity = HasId & HasName & HasTimestamps;

const user: BaseEntity = {
  id: 1,
  name: "Alice",
  createdAt: new Date(),
  updatedAt: new Date(),
}; // All three groups must be present

// Practical pattern: extending a third-party type without interface merging
import { Request } from "express";
type AuthRequest = Request & { user: User; sessionId: string };

function protectedHandler(req: AuthRequest, res: Response) {
  console.log(req.user.name);    // user is typed — from intersection
  console.log(req.headers.host); // headers is typed — from Request
}

Property Conflicts in Intersections

When intersected types have the same property name with incompatible types, the result is never — a silent footgun:

type A = { value: string };
type B = { value: number };
type AB = A & B;
// AB['value'] is string & number = never

const x: AB = { value: ??? }; // Impossible — nothing is both string and number
// TypeScript will not error here at definition time — the error appears when you try
// to assign a value: string is not assignable to never

Union vs Intersection — The Structural Perspective

Counterintuitively, union types have fewer members accessible (only the intersection of their property sets) while intersection types have more members accessible (the union of all property sets):

interface Cat { meow(): void; name: string; }
interface Dog { bark(): void; name: string; }

// Union Cat | Dog — only 'name' is accessible without narrowing
// (it's the only property that exists on BOTH Cat AND Dog)
function greet(pet: Cat | Dog) {
  pet.name;   // OK — both have name
  pet.meow(); // Error — Dog has no meow()
  pet.bark(); // Error — Cat has no bark()
}

// Intersection Cat & Dog — ALL properties from both are accessible
function greetSuperPet(pet: Cat & Dog) {
  pet.name;   // OK
  pet.meow(); // OK — must be a Cat
  pet.bark(); // OK — must also be a Dog
}