Enum vs union.
The modern default, and when to break it.

// ─── The union ───────────────────────────────
type Status = 'idle' | 'loading' | 'success' | 'error';

const s: Status = 'loading'; // ✅
// const bad: Status = 'done'; // ❌ 'done' not in the union

// ─── Using it in a function ──────────────────
function label(s: Status): string {
switch (s) {
case 'idle': return 'Ready';
case 'loading': return 'Loading…';
case 'success': return 'Done';
case 'error': return 'Failed';
}
}

// ─── Wire-compatible with any API ────────────
// The value is literally 'loading' — the string.
// No conversion needed:
// fetch('/api/status', { body: JSON.stringify({ status: s }) });

// ─── Union + const object for labels ─────────
// If you need a runtime lookup, use satisfies:
const STATUS_LABELS = {
idle: 'Ready',
loading: 'Loading…',
success: 'Done',
error: 'Failed'
} satisfies Recordstring>;

function label2(s: Status): string {
return STATUS_LABELS[s];
}

// ─── Iterating the values ────────────────────
// Without an enum, iterate a const array:
const STATUSES = ['idle', 'loading', 'success', 'error'] as const;

// Zero runtime output for the type itself.
// The array above is the only runtime artifact,
// and only if you actually iterate.

console.log(label(s), label2('success'), STATUSES);

// ─── Numeric enum (has reverse mapping) ──────
enum Direction {
Up, // 0
Down, // 1
Left, // 2
Right // 3
}

const d = Direction.Up; // 0
const name = Direction[0]; // 'Up' — reverse mapping

// The compiled output is:
// {
// '0': 'Up', '1': 'Down', '2': 'Left', '3': 'Right',
// Up: 0, Down: 1, Left: 2, Right: 3
// }
// Both directions. This is the numeric enum's unique feature.

// ─── String enum (no reverse mapping) ────────
enum Status {
Idle = 'idle',
Loading = 'loading',
Success = 'success',
Error = 'error'
}

const s = Status.Loading; // 'loading'
// Status['loading'] // ❌ no reverse mapping for string enums

// ─── Union of enum values ────────────────────
// To get a union you have to extract it:
type StatusValue = Status; // 'idle' | 'loading' | 'success' | 'error'
// enum name used as a type gives the union of its values

// ─── Iterating enum values ───────────────────
// Numeric enums include reverse mappings in Object.values:
const allDirections = Object.values(Direction);
// ['Up', 'Down', 'Left', 'Right', '0', '1', '2', '3']
// — includes both the names and the numbers ⚠️

// String enums are cleaner:
const allStatuses = Object.values(Status);
// ['idle', 'loading', 'success', 'error'] — only values ✅

// ─── When enums are actually the right choice
//
// 1. Numeric flags used across many modules
// enum Permission { None=0, Read=1, Write=2, Admin=4 }
// const p = Permission.Read | Permission.Write // bitwise
//
// 2. Reverse mapping genuinely needed
// You want Direction[0] → 'Up' at runtime.
// (Rare, but real for protocol codes.)
//
// 3. Legacy codebase that already uses enums
// Don't migrate for the sake of it.
//
// 4. Library public API compatibility
// You're extending an existing enum-based library.

console.log(d, name, s, allStatuses);

// ─── const enum inlines values ───────────────
const enum Status {
Idle = 'idle',
Loading = 'loading',
Success = 'success'
}

const s = Status.Loading; // compiles to: const s = 'loading'
// No runtime object is created.
// The reference is inlined to the literal.

// ─── Why const enum is risky ─────────────────
//
// 1. Requires the compiler to see both the enum
// definition AND every usage site at once.
// Modern bundlers compile file-by-file (esbuild,
// Vite) — they can't inline across files.
//
// 2. Incompatible with isolatedModules: true,
// which is required by esbuild, Babel, and Vite.
//
// 3. tsconfig has preserveConstEnums to work
// around this, but then it's not really an
// optimization anymore.
//
// 4. ambient const enum (in .d.ts) is explicitly
// unsupported in some configurations.

// ─── Modern alternative: union + const object ─
type StatusValue = 'idle' | 'loading' | 'success';

const Status = {
Idle: 'idle',
Loading: 'loading',
Success: 'success'
} as const satisfies Record<string, StatusValue>;

// Usage:
// Status.Loading → 'loading' (literal type)
// StatusValue → 'idle' | 'loading' | 'success'
// Works in Vite, esbuild, Babel — no special config.
// Works with isolatedModules.
// Zero runtime gotchas.

// ─── The decision rule ───────────────────────
//
// Use union types → 90% of cases
// Use const object + satisfies → 9% of cases
// (need named "enum" access without enum quirks)
// Use enum → 1% of cases
// (numeric flags, reverse mapping, legacy)
// Use const enum → ~0%
// (breaks with modern bundlers)

console.log(s, Status.Loading);