我正在用Typescript构建一个设计系统,我希望根据主(必需)颜色动态计算浅色/深色的字段。设置如下:
export default class Color {
main: string = "#000000"; //required color
light?: string = calculateLight(this.main);
dark?: string = calculateDark(this.main);
}
颜色对象然后在调色板类型中使用:
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;
现在我想用带花括号的面板初始化主题:
export const theme: ITheme = {
palette: {
primary: {
main: "#323130",
},
accent: {
main: "#0078d4",
},
}
};
但是光和暗的区域还不清楚。
有没有办法让它自动完成?
或者唯一的方法是使用一个辅助函数createTheme
which would iterate through each Color
in <哪一个会迭代每一个Color
in Palette
and execu在Palette
and执行构造函数或函数?