Vuejs & ts, app-wide settings: as const with satisfies VS abstract class with static readonly properties

3 weeks ago 19
ARTICLE AD BOX

While I found quite a lot on the topic "enum VS as const", I could not find a satisfying clue to my current design decision:
I need a solution for a typed app settings object/class in a Vuejs & ts app, basically to be able to have my IDE auto-complete the available settings options and to avoid literal strings hardcoded in dozens of places. I also want to be able to use env vars from import.meta.env in there. I gathered as much as: ts enums seem to have fallen out of favour because of runtime bloat. So, leaving them aside, which one of the following two solutions would you prefer, considering ease of use / IDE sugar, resilience and process resources (which I don't know a lot about, tbh):

export default abstract class AppSetting { static readonly UI_API_HOST: string = import.meta.env.VITE_UI_API_HOST }

OR

export const AppSetting = { UI_API_HOST: import.meta.env.VITE_UI_API_HOST as string, } as const satisfies Record<string, string>
Read Entire Article