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 ELEMENTSinterface _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?