Question

我正在研究React应用程序的配色方案（带有CSS-in-s JS TS），为了方便起见，我使用HSL编写了颜色，但是，由于它们是我想以十六进制形式将它们交付给用户以节省一些不必要的字节。我现在面临两个选择：

我要么做这样的事：

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

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

但是这种方法会（1）违反了我保存字节的观点，并且（2）每次都需要重新计算颜色，

或者我只是在其他地方写下HSL值，然后在我的代码中放入十六进制代码。

我发现与我想做的最接近的事情是TypeScript的const enum，它们在编译时替换值。但是，它们仅存储预定义的值，并且-据我所知-不能用作函数。因此，我需要能够执行以下操作：

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

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

将被编译为

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

我该如何实现？

^{ᶦˢᵖᵒˢˢᶦᵇˡᵉˀs}

我考虑的另一种方法是使用第一种方法，然后让Prepack之类的工具进行一些优化（预评估功能并将其删除）。

Answer 1

您需要的是某种形式的缓存机制。

您首先根据输入内容生成唯一ID，例如

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

，然后随身缓存值：

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 */
}

这样一来，当您填写预定义的colors时，该值将被缓存，而无需重新计算。

TypeScript中的“功能”常量枚举

1 个答案: