Alternative option for const enums in Typescript

Question

Alternative option for const enums in Typescript

In the ever-evolving world of Typescript transpilers, there is a noticeable shift towards per-module transpilation to boost build speed. However, this approach comes at a cost - it impedes cross-module const enum usage as type information is required for their transpilation.

I find myself dealing with a plethora of const enums which, without the inlining feature that const offers:

Tend to balloon in size even after minification due to lengthy property names
Reveal internal backend property names that should remain private

Currently, I generate these const enum definitions from backend native code. To provide an example, imagine being employed at Apple and having an extensive const enum encompassing every hardware device.

const enum HardwareType {
    Apple1 = 0,
    // ...
    iPhoneX = 412,
    // ...
    iPhoneUltraXD = 499, // Hypothetical unannounced iPhone
}

Simply switching const enum HardwareType to enum HardwareType, besides enlarging my bundle size, would inadvertently expose the new "iPhone Ultra XD" to the public.

Although tools like Terser offer support for --mangle-props, using it raises concerns mentioned in official documentation. Moreover, implementing a regex pattern to encompass every single HardwareType seems cumbersome. Bear in mind, the aforementioned scenario is just a glimpse; in reality, I have numerous enums with hundreds of values each.

While I strive to embrace cutting-edge technology for bundling applications, I can't help but wonder if there's a more efficient solution out there for compile-time inlining of constant values?

typescript webpack babeljs rollupjs terser

Answer 1

Answer №1

const enum may not be the most secure option for hiding original names, as the typescript compiler tends to add them in comments. An example can be seen in this playground.

// Input:
const enum Fruites {
    Apple = 1,
    Banana = 2
}

const x = Fruites.Apple
const y = Fruites.Banana

// Output:
"use strict";
const x = 1 /* Apple */;
const y = 2 /* Banana */;

If you're looking for a more reliable way to hide secret names in output files using the latest technology for application bundling, consider using esbuild-loader or esbuild. They offer a define option that allows you to replace secret naming with meaningless values at compilation time.

define: {
  "secrets.hardwareType.iPhoneUltraXD": "499"
}

You can then safely use the defined value in your source code.

// Source code: 
if (deviceId === secrets.hardwareType.iPhoneUltraXD) {
// Bundled code:
if(deviceId===499){

The define option can be configured in webpack or esbuild config files with any computed values, giving you flexibility in the number of compile-time definitions you can set.

Answer 2

const enum may not be the most secure option for hiding original names, as the typescript compiler tends to add them in comments. An example can be seen in this playground.

// Input:
const enum Fruites {
    Apple = 1,
    Banana = 2
}

const x = Fruites.Apple
const y = Fruites.Banana

// Output:
"use strict";
const x = 1 /* Apple */;
const y = 2 /* Banana */;

If you're looking for a more reliable way to hide secret names in output files using the latest technology for application bundling, consider using esbuild-loader or esbuild. They offer a define option that allows you to replace secret naming with meaningless values at compilation time.

define: {
  "secrets.hardwareType.iPhoneUltraXD": "499"
}

You can then safely use the defined value in your source code.

// Source code: 
if (deviceId === secrets.hardwareType.iPhoneUltraXD) {
// Bundled code:
if(deviceId===499){

The define option can be configured in webpack or esbuild config files with any computed values, giving you flexibility in the number of compile-time definitions you can set.

Alternative option for const enums in Typescript

Answer №1

Similar questions

Converting an HTML page to PDF with Angular using jsPdf and Html2Canvas

Converting image bytes to base64 in React Native: A step-by-step guide

Incorrect order in Angular2 NgFor within tree model when elements are removed and then added back

Naming build files with specific names in vue-cli3

Using masonry-layout with Next Js leads to a ReferenceError stating that window is not defined

The string returned from the Controller is not recognized as a valid JSON object

Angular2 Error: TemplateRef provider missing in ng2-bootstrap

The module './product' could not be located, resulting in error TS2307

Service consuming in Angular 2 using Stomp protocol

What are the best techniques for streamlining nested objects with Zod.js?

Error in Angular Material: SassError - The CSS after "@include mat" is invalid. Expected 1 selector or at-rule, but found ".core();"

Utilizing the dialogue feature within Angular 6

Lazy loading implemented with BootstrapVue's b-nav component

The HTTPS protocol seems to be causing CORS issues, but I can access http://localhost without

Using Angular to include a forward slash "/" in the text input for a date field

Obtain a comprehensive list of React state fields

Exploring deep nested components and elements in Angular for a targeted specific functionality

Using TypeScript - Implementing a generic constraint to allow passing a Zod schema result as an argument to a function

A step-by-step guide to integrating a legend on a leaflet map using Angular and the ngx-leaflet plugin

Launch another modal and then deactivate the initial modal