I have a component with following props:
export function SortableItems<T extends { id: string }, K = unknown>({
items: itemsFromProps,
Item,
onDragEnd,
collisionDetection = closestCenter,
strategy = verticalListSortingStrategy,
className,
additionalProps,
}: {
items: T[];
Item: React.ComponentType<SortableItemRendererProps<T> & K>;
onDragEnd?: (data: {
event: DragEndEvent;
items: T[];
setItems: Dispatch<SetStateAction<T[]>>;
}) => void;
collisionDetection?: CollisionDetection;
strategy?: SortingStrategy;
className?: string;
additionalProps?: (item: T) => K;
}) {
So I want to make Item
prop a react component type which implements SortableItemRendererProps<T>
props but it can have some other props that these.
export type SortableItemRendererProps<T> = {
item: T;
dragOverlay?: boolean;
handleProps?: SortableItemHandleProps;
disabled?: boolean;
};
I tried to introduce second generic type K
but then when trying to create that element
<Item {...props} {...additionalProps?.(el)} />
I have an error:
Type '{ item: T; dragOverlay: true; }' is not assignable to type 'K'.
'K' could be instantiated with an arbitrary type which could be unrelated to '{ item: T; dragOverlay: true; }'.ts(2769)
How to fix it to allow Item
component to accept additional props that these required by SortableItemRendererProps<T>
?