เจาะลึกระบบ Type System: Union, Intersection และ Type Narrowing

type ID = string | number; // เป็น string ก็ได้ หรือ number ก็ได้

function printId(id: string | number) {
  // ❌ Error: toUpperCase มีแค่ใน string ไม่มีใน number
  // console.log(id.toUpperCase());

  // ✅ ต้อง Narrowing ก่อน
  if (typeof id === "string") {
    console.log(id.toUpperCase());
  }
}

interface Draggable {
  drag: () => void;
}
interface Resizable {
  resize: () => void;
}

// UIComponent ต้องทำได้ *ทั้ง* drag และ resize
type UIComponent = Draggable & Resizable;

const box: UIComponent = {
  drag: () => {},
  resize: () => {},
};

type LoadingState = { status: "loading" };
type SuccessState = { status: "success"; data: string[] };
type ErrorState = { status: "error"; error: Error };

// State เป็นได้แค่ 3 แบบนี้เท่านั้น! เป็นแบบอื่นไม่ได้
type ApiState = LoadingState | SuccessState | ErrorState;

function render(state: ApiState) {
  switch (state.status) {
    case "loading":
      // ตรงนี้ state คือ LoadingState
      return "Loading...";
    case "success":
      // ตรงนี้ state คือ SuccessState (เรียก .data ได้)
      return `Data: ${state.data.join(", ")}`;
    case "error":
      // ตรงนี้ state คือ ErrorState (เรียก .error ได้)
      return `Error: ${state.error.message}`;
  }
}

let value: unknown;
value = "Hello";

// ❌ Error: Object is of type 'unknown'
// console.log(value.toUpperCase());

// ✅ ต้องเช็คก่อน
if (typeof value === "string") {
  console.log(value.toUpperCase());
}

function unknownState(state: never): never {
  throw new Error("Unexpected state");
}

// ใน Switch case ของหัวข้อที่ 3 ถ้าเราลืม case "error"
// TS จะฟ้องว่าตัวแปร state ไม่ใช่ never (เพราะมันเหลือเคส error ที่ยังไม่ได้ดัก)