Argument type not assignable to parameter type

Viewed 1249

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?

1 Answers

The key of course was value: Array<_IElement>, in

export interface ISection extends _IElement{
    value: Array<_IElement>,
    type: elementType.SECTION,
}

It had to be declared as <IElementUnion>, not <_IElement>.

Related