TypeScript中的“功能”常量枚举

Question

I'm working on the color scheme of a React application (w/ CSS-in- JS TS), and, for convenience, I write the colors using HSL, but, since they are quite a lot, I would like to deliver them to the users as hex to save some unnecessary bytes. I am now faced with two options:

• either I do something like this:

const hsl = (h: number, s: number, l: number) => {
  /* convert to hex */
  return hex;
}

const colors = {
  primary: hsl(205, 1, 0.52)
}

but this approach would (1) go against my point of saving bytes and (2) require the colors to be recalculated each and every time,

• or I just write down the HSL values somewhere else, and put hex codes in my code.

I found that the nearest thing to what I want to do are TypeScript's const enum s, which replace values at compile time. However, they only store predefined values, and can't – to my knowledge – be used as a function. So, I would need to be able to do something like this:

const enum Hsl (h: number, s: number, l: number) {
  /* convert to hex */
  return hex;
}

const colors = {
  primary: Hsl(205, 1, 0.52)
}

which would get compiled to

const colors = {
  primary: '#0C9BFF'
};

How could I achieve this?

^{ᶦˢ ᵗʰᶦˢ ᵉᵛᵉⁿ ᵖᵒˢˢᶦᵇˡᵉˀ}

An alternative I considered was using the first approach and then letting tools like Prepack do some optimizations (pre-evaluating the function and removing it).

Answer 1

What you need is some form of caching mechanism.

You first generate a unique id based on the input, eg

function getId(h: number, s: number, l: number) {
   return String(h) + ',' + String(s) + ',' + String(l)
}

and then cache the value as you go:

const cache: Record<string, string> = {}
function hsl(h: number, s: number, l: number) {
  const id = getId(h, s, l)
  return cache[id] = /* do your calculation */
}

With that, as you fill in your predefined colors , the value will be cached and you don't need to re-calculate it.