[{"_1":2,"_35":-5,"_36":-5},"loaderData",{"_3":4,"_9":10},"root",{"_5":6,"_7":8},"url","http://www-origin.peterbe.com/oc-TypeScript","method","GET","routes/home-splat",{"_11":12,"_14":15,"_31":-5,"_32":-5,"_33":34},"categories",[13],"TypeScript","posts",[16],{"_17":18,"_19":20,"_21":22,"_23":24,"_25":26,"_11":27,"_29":30},"title","TypeScript enums without enums","oid","typescript-enums-without-enums","pub_date","2025-01-29T14:12:37.096Z","html","

My colleague @mattcosta7 demonstrated something that feels obvious in hindsight.

Instead of enums, use a regular object. So instead of

\nenum State {\n  SOLID,\n  LIQUID,\n  GAS,\n}\n

\n\n

(playground here - note how \"complex\" the transpiled JavaScript becomes)

...use an object. Objects have the advantage that when the TypeScript is converted to JavaScript, it looks pretty much identical. TypeScript 5.8 makes it possible to disallow \"non-erasable syntax\" which means you can set up your tsconfig.json to avoid enum.

The alternative is an object. It's a bit more verbose but it has advantages:

\nconst State = {\n  SOLID: "solid",\n  LIQUID: "liquid",\n  GAS: "gas"\n} as const\n\ntype State = typeof State[keyof typeof State]\n

\n\n

(playground here - note how simple the transpiled JavaScript is)

In the above code, if you hover the mouse over State it'll say

'solid' | 'liquid' | 'gas'

\n\n","comments",0,[28,13],"JavaScript","split",4985,"nextPage","previousPage","page",1,"actionData","errors"]

Peterbe.com

TypeScript enums without enums

January 29, 2025