I'm puzzled by the errors I'm encountering in my IDE with the following code:
I defined some interfaces/types
interfaces/types:
interface GradientColor {
type: string;
value: {
angle: string | number;
colours: string[];
};
}
interface NormalColor {
type: string;
value: string;
}
type ColorOptions = GradientColor | NormalColor;
(mixture of UK and US spellings present)
usage:
now, I want to use these in a function
const parseCSSColor = (color: ColorOptions) => {
// ...
return `linear-gradient(${color.value.angle}deg, ${color.value.colors[0]}, ${color.value.colors[1]})`;
// ...
}
issue:
After setting everything up, my IDE is showing me the following error:
Property 'angle' does not exist on type 'string | { angle: string | number; colours: string[]; }'.
Property 'angle' does not exist on type 'string'.
Why? color.value can be either a string or an object with .angle and .colours