参数类型不可分配给参数类型

Question

我有一个类型不匹配，我不确定它来自哪里：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。

接口定义如下：

// SHEET ELEMENTS
interface _IElement {
    name: string
}

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

...

export type IElementUnion = ISection | IText | IControlledNumber

函数在 React 组件中被调用：

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 是这样定义的：

type ElementProps = {
    element: IElementUnion
}

函数签名：

export function transformToJsx(element: IElementUnion, i: number)

现在我在调用和函数定义中都没有使用 _IElement 类型 - 那么类型不兼容从何而来？

Answer 1

关键当然是value: Array<_IElement>, in

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

它必须声明为<IElementUnion>，而不是<_IElement>。