-
Notifications
You must be signed in to change notification settings - Fork 202
Description
In almost every component i cloned from gluestack, I had issues with TS regarding the "size" prop. Here is an example in the slider component:
`
const SliderThumb = React.forwardRef<
React.ComponentRef,
ISliderThumbProps
(function SliderThumb({ className, size, ...props }, ref) {
const { size: parentSize } = useStyleContext(SCOPE);
return (
<UISlider.Thumb
ref={ref}
{...props}
className={sliderThumbStyle({
parentVariants: {
size: parentSize,
},
size,
class: className,
})}
/>
);
});`
The shown error is:
Argument of type '{ parentVariants: { size: any; }; size: string | number | undefined; class: string | undefined; }' is not assignable to parameter of type '((({ [x: string]: string | number | undefined; [x: number]: string | number | undefined; } & ClassProp<ClassValue>) | ({ [x: string]: string | number | undefined; [x: number]: string | ... 1 more ... | undefined; } & ClassProp<...>) | ({ ...; } & ClassProp<...>) | ({ ...; } & ClassProp<...>) | ({ ...; } & ClassProp<...'. Type '{ parentVariants: { size: any; }; size: string | number | undefined; class: string | undefined; }' is not assignable to type '({ [x: string]: string | number | undefined; [x: number]: string | number | undefined; } & { class?: undefined; className?: undefined; } & { parentVariants?: Omit<({ [x: string]: string | number | undefined; [x: number]: string | ... 1 more ... | undefined; } & ClassProp<...>) | ... 4 more ... | ({ ...; } & ClassPro...'. Type '{ parentVariants: { size: any; }; size: string | number | undefined; class: string | undefined; }' is not assignable to type '{ size?: "sm" | "md" | "lg" | undefined; } & { class?: undefined; className: ClassValue; } & { parentVariants?: Omit<({ [x: string]: string | number | undefined; [x: number]: string | number | undefined; } & ClassProp<...>) | ... 4 more ... | ({ ...; } & ClassProp<...>), "className" | "class"> | undefined; }'. Type '{ parentVariants: { size: any; }; size: string | number | undefined; class: string | undefined; }' is not assignable to type '{ size?: "sm" | "md" | "lg" | undefined; }'. Types of property 'size' are incompatible. Type 'string | number | undefined' is not assignable to type '"sm" | "md" | "lg" | undefined'. Type 'string' is not assignable to type '"sm" | "md" | "lg" | undefined'.ts(2345)
My current workaround to avoid TS errros is to write size: size as any.
Thank you in advance! :)