I am seeking to create a custom type that will enable me to specify a property for a react component:
type CustomType<T> = {
base: T;
tablet?: T;
desktop?: T;
};
export type ResponsiveCustomValue<T> = CustomType<T> | T;
This setup functions well with strings, numbers, and booleans, allowing me to use
backgroundUrl: ResponsiveCustomValue<string>
I can easily provide backgroundUrl either as a string or within the interface structure (containing string values). Everything works smoothly.
However, if I attempt to apply the same logic with an interface, like so
type StaticImageData = {
src: string;
height: number;
width: number;
blurDataURL?: string;
};
export type ImageProps = {
imageData: ResponsiveCustomValue<StaticImageData>;
};
And then try to check if (imageData.base), I encounter the familiar typescript error:
Property 'base' does not exist on type 'ResponsiveCustomValue<StaticImageData>'. Property 'base' does not exist on type 'StaticImageData'Is there a way to adjust the definition of the ResponsiveCustomValue type to properly work with interfaces?