Handling Unexpected API Values in React (TSX) Using TypeScript Union Types and never

#react #webdev #javascript #typescript

Behavior When API Returns a Value Not in the Union Type

📝 Context

You define a strict union type like "admin" | "editor" | "viewer". But what if your API returns "super-admin"? Without TS, your UI may behave unpredictably.

🚨 Without TypeScript – The Problem

// React without TypeScript
function UserRoleMessage({ role }) {
  switch (role) {
    case "admin":
      return <p>Welcome Admin</p>;
    case "editor":
      return <p>Welcome Editor</p>;
    case "viewer":
      return <p>Welcome Viewer</p>;
    default:
      return <p>Unknown Role</p>;
  }
}

// API mistakenly sends "super-admin"
<UserRoleMessage role="super-admin" />;
// ❌ User just sees "Unknown Role"

👉 Issue

No warning at compile time. The bug slips through until runtime.

✅ With TypeScript + never – Safer API Handling

type UserRole = "admin" | "editor" | "viewer";

function UserRoleMessage({ role }: { role: UserRole }) {
  switch (role) {
    case "admin":
      return <p>Welcome Admin</p>;
    case "editor":
      return <p>Welcome Editor</p>;
    case "viewer":
      return <p>Welcome Viewer</p>;
    default: {
      // Exhaustive check
      const _exhaustive: never = role;
      return _exhaustive;
    }
  }
}

// ✅ Best practice: validate API before assignment
function validateRole(role: string): UserRole | null {
  if (role === "admin" || role === "editor" || role === "viewer") {
    return role;
  }
  return null;
}

const apiRole = "super-admin"; // From backend
const safeRole = validateRole(apiRole);
<UserRoleMessage role={safeRole ?? "viewer"} />;