TypeScript help for the last version

[ionutcirja]

For the previous version of the library I was defining an item like this:

`export const Item: Components['Item'] = React.forwardRef<
HTMLDivElement,
ItemProps

(({ children, ...rest }, ref) => {
return (
<div className="pb-2" ref={ref} {...rest}>
{children}

);
});

Item.displayName = 'Item';`

But with the current version I'm getting this error:

src/components/live-shows/chat/virtuoso-components.tsx(22,14): error TS2322: Type 'ForwardRefExoticComponent<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children" | "style"> & { ...; } & RefAttributes<...>>' is not assignable to type 'ComponentType<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children" | "style"> & { ...; } & ContextProp<...>>'. Type 'ForwardRefExoticComponent<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children" | "style"> & { ...; } & RefAttributes<...>>' is not assignable to type 'FunctionComponent<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children" | "style"> & { ...; } & ContextProp<...>>'. Types of parameters 'props' and 'props' are incompatible. Type 'Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children" | "style"> & { ...; } & ContextProp<...>' is not assignable to type 'Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children" | "style"> & { ...; } & RefAttributes<...>'. Type 'Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children" | "style"> & { ...; } & ContextProp<...>' is not assignable to type '{ 'data-index': number; 'data-item-group-index'?: number; 'data-item-index': number; 'data-known-size': number; item: Readonly<{ userId: string; displayName: string; date: number; content: string; disabled?: boolean; type: ChatMessageType; }>; }'. Types of property 'item' are incompatible. Type '{}' is missing the following properties from type 'Readonly<{ userId: string; displayName: string; date: number; content: string; disabled?: boolean; type: ChatMessageType; }>': userId, displayName, date, content, type

Does anyone know how to solve this?
Many thanks

[petyosi]

Seems to work fine here: https://codesandbox.io/p/sandbox/xlgmrz.

[ionutcirja]

Yes, the code works correctly, but npm run tsc --build will fail with that error.

[petyosi]

It does not in the example above.

❮ nr typecheck

> [email protected] typecheck
> tsc --noEmit


a945bde9-0958-4561-92b5-5a66aaadb31b on  master [?]