1

我正在 Typescript 中构建一个设计系统,我希望根据主要(必需)颜色动态计算浅色/深色字段。设置如下:

export default class Color {
  main: string = "#000000"; //required color
  light?: string = calculateLight(this.main);
  dark?: string = calculateDark(this.main);
}

然后在 Palette 类型中使用颜色对象:

type ColorTypes = "primary" | "accent"; //I need this to restrict available values later in components' props

type Palette = {
  [key in ColorTypes]: Color; //created based on ColorTypes for easier code updates
};
export default Palette;

现在我想使用带有花括号的 Palette 初始化主题:

export const theme: ITheme = {
  palette: {
    primary: {
      main: "#323130",
    },
    accent: {
      main: "#0078d4",
    },
  }
};

但是lightdark字段仍未定义。

有没有办法让它自动完成?或者唯一的方法是使用一个辅助函数createTheme,比如遍历每个ColorinPalette并执行构造函数或函数?

4

0 回答 0