TypeScript Union and Intersection Types: Practical Examples

type ID = string | number;

function printID(id: ID) {
  console.log(`ID: ${id}`);
}

printID(101); // ✅ OK
printID("ABC123"); // ✅ OK

type Result<T> =
  | { success: true; data: T }
  | { success: false; error: string };

function handleResult<T>(result: Result<T>) {
  if (result.success) {
    console.log(result.data);
  } else {
    console.log(result.error);
  }
}

type LoadingState =
  | { status: "idle" }
  | { status: "loading" }
  | { status: "success"; data: User[] }
  | { status: "error"; error: Error };

function renderUsers(state: LoadingState) {
  switch (state.status) {
    case "idle":
      return "Click to load";
    case "loading":
      return "Loading...";
    case "success":
      return state.data.map(u => u.name).join(", ");
    case "error":
      return `Error: ${state.error.message}`;
  }
}

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

interface Employee {
  employeeId: string;
  department: string;
}

type Staff = Person & Employee;

const employee: Staff = {
  name: "Alice",
  age: 30,
  employeeId: "E123",
  department: "Engineering"
};

interface BaseResponse {
  timestamp: Date;
  requestId: string;
}

interface SuccessResponse<T> extends BaseResponse {
  success: true;
  data: T;
}

interface ErrorResponse extends BaseResponse {
  success: false;
  error: { code: string; message: string };
}

type ApiResponse<T> = SuccessResponse<T> | ErrorResponse;

interface BaseField {
  name: string;
  label: string;
}

interface TextField extends BaseField {
  type: "text";
  maxLength?: number;
}

interface NumberField extends BaseField {
  type: "number";
  min?: number;
  max?: number;
}

type FormField = TextField | NumberField;

function renderField(field: FormField) {
  switch (field.type) {
    case "text":
      return `<input type="text" />`;
    case "number":
      return `<input type="number" />`;
  }
}