I have a type mismatch and I am not sure where is it coming from: Error:(35, 68) TS2345: Argument of type '(subElement: IElementUnion, i: number) => JSX.Element' is not assignable to parameter of type '(value: _IElement, index: number, array: _IElement[]) => Element'. Types of parameters 'subElement' and 'value' are incompatible. Type '_IElement' is not assignable to type 'IElementUnion'. Type '_IElement' is missing the following properties from type 'IControlledNumber': value, type.
The interfaces are defined like this:
// SHEET ELEMENTS
interface _IElement {
name: string
}
export interface ISection extends _IElement{
value: Array<_IElement>,
type: elementType.SECTION,
}
...
export type IElementUnion = ISection | IText | IControlledNumber
The function is called in a React component:
export const Section: FunctionComponent<ElementProps> = ({element}) =>
<ColumnView>
<Line/>
<Text75>{element.name}</Text75>
{element.type === elementType.SECTION && element.value.map((subElement: IElementUnion, i: number) =>
transformToJsx(subElement, i))}
</ColumnView>;
Props are defined like this:
type ElementProps = {
element: IElementUnion
}
Function signature:
export function transformToJsx(element: IElementUnion, i: number)
Now I do not use _IElement type neither in my call nor in the function definition - so where does the type incompability come from?