Shrink TypeScript Code: Replace Enums with Const Objects

2 hours ago 1

Enums look elegant, but they secretly bloat your JavaScript output. Each one compiles into a function wrapper that adds unnecessary weight to your bundle.

Example:

// Old way with enums enum PaymentMethod { Credit = 'credit', Debit = 'debit', Cash = 'cash', }

Usage:

const method = PaymentMethod.Credit;

After compilation:

var PaymentMethod; (function (PaymentMethod) { PaymentMethod["Credit"] = "credit"; PaymentMethod["Debit"] = "debit"; PaymentMethod["Cash"] = "cash"; })(PaymentMethod || (PaymentMethod = {}));

Each key creates more boilerplate. In large projects with dozens of enums, this overhead adds up.

Replace enums with const objects and a type alias for keys.

// Modern way const PaymentMethod = { Credit: 'credit', Debit: 'debit', Cash: 'cash', } as const; type PaymentMethod = keyof typeof PaymentMethod; const method: PaymentMethod = PaymentMethod.Credit;

✅ Still type-safe
✅ Works with IntelliSense
✅ Generates minimal JavaScript

// Const object version const FormStatus = { Idle: 'idle', Submitting: 'submitting', Success: 'success', Error: 'error', } as const; type FormStatus = keyof typeof FormStatus; function renderForm(status: FormStatus) { console.log(`Form is ${status}`); } renderForm(FormStatus.Success); // ✅ Auto-complete worksconst AppTheme = { Light: 'light', Dark: 'dark', System: 'system', } as const; type AppTheme = keyof typeof AppTheme; function applyTheme(theme: AppTheme) { console.log(`Theme applied: ${theme}`); } applyTheme(AppTheme.Dark);const HttpResponse = { Ok: 200, NotAuthorized: 401, Timeout: 408, } as const; type HttpResponse = typeof HttpResponse[keyof typeof HttpResponse]; if (res.code === HttpResponse.Timeout) { console.error('Request timed out'); }const Signal = { Start: 1, Stop: 2, Pause: 3, } as const; type Signal = typeof Signal[keyof typeof Signal];

If you need reverse mapping, write a helper:

function findKey<T extends Record<string, unknown>>( obj: T, value: T[keyof T] ): string | undefined { return Object.keys(obj).find((k) => obj[k] === value); } const found = findKey(HttpResponse, 401); // "NotAuthorized"