const colors = ["red", "blue", "green", "yellow"] as const;
const buttonSizes = ["small", "medium", "large"] as const;
type ColorType = (typeof colors)[number];
type SizeType = (typeof buttonSizes)[number];
type ButtonProperties = {
color?: ColorType;
size?: SizeType;
} & {
[K in ColorType as `${Lowercase<K>}`]?: boolean;
};
This code snippet showcases how a Vue component can accept different properties such as
or like
If you try to define the properties statically, like so:
type ButtonProperties = {
color?: "red" | "blue" | "green" | "yellow";
size?: "small" | "medium" | "large";
red?: boolean;
blue?: boolean;
green?: boolean;
yellow?: boolean;
}
It might work... but it can become repetitive and cumbersome when iterating over color options.
The initial example works fine, although VUE may throw an error for some reason:
Internal server error: [@vue/compiler-sfc] type argument passed to defineProps() must be a literal type, or a reference to an interface or literal type.
This issue is known and is currently being addressed.
Is there a different approach to dynamically defining the ButtonProperties without using intersections?