I have a custom class that extends a base class and combines the properties of both. Here is an example:
interface BaseFooProps {
name: string;
}
type BaseFoo<T extends BaseFooProps = BaseFooProps> = React.FC<T & BaseFooProps>;
const BaseFooComponent: React.FC<BaseFooProps> = ({ name }) => <>{name}</>;
Now, let's look at the derived class:
interface AProps extends BaseFooProps {
height: number;
}
const A: React.FC<AProps> = ...
Next, I want to create another component that receives an array of these BaseFoo components. This ensures that each item in the array has at least the base properties:
interface OtherBarProps {
items: BaseFoo[]
};
const OtherBar: React.FC<OtherBarProps> = ...
const items = [
<A name=... height=... key=... />,
];
<OtherBar items={components} />
However, there is an error on the last line, stating that
Type 'Element[]' is not assignable to type 'BaseFoo<BaseFooProps>[]'I have tried different approaches like casting items with as ..., modifying the left-hand side, and adding {} to the
React.FC<T & BaseFooProps>Why are the elements in the array being cast as so generic to Element instead of BaseFoo? How can I make the type system accept them correctly?