When I try to import an interface into my Card component and extend CardProps, a yarn build (Typescript 4.5.4) displays the following error:
Type error: Type '{ children: Element[]; className: string; border: true; disabled: boolean; }' is not assignable to type 'IntrinsicAttributes & CardProps'.
Property 'children' does not exist on type 'IntrinsicAttributes & CardProps'.
> 79 | <Card/
The code in question looks like this:
// types.ts
export interface BaseComponentProps {
children?: ReactNode | undefined;
className?: string;
style?: Record<string, unknown>;
onClick?: React.MouseEventHandler<HTMLElement>;
onMouseOver?: React.MouseEventHandler<HTMLElement>;
onMouseLeave?: React.MouseEventHandler<HTMLElement>;
key?: number | string | null;
'data-testid'?: string;
}
// card.tsx
import type { BaseComponentProps } from 'src/types';
interface CardProps extends BaseComponentProps {
border?: boolean;
disabled?: boolean;
}
export function Card({ border = false, disabled = false, className, children }: CardProps): JSX.Element { ... }
All the children of Card are of type JSX.Element, and I have tried various solutions without success.
I noticed that duplicating 'children' in CardProps or moving BaseComponentProps into Card.tsx resolves the error. Could extending an interface with optional properties via a type import be causing this issue?