我正在 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",
},
}
};
但是light
和dark
字段仍未定义。
有没有办法让它自动完成?或者唯一的方法是使用一个辅助函数createTheme
,比如遍历每个Color
inPalette
并执行构造函数或函数?