Question

这是我的styledComponent：

const stopPropagation = (event: Event): void => {
  event.stopPropagation();
};

<StyledComp onClick={stopPropagation}> //error occurs here
    hi StyledComp
</StyledComp>

这就是我的定义方式：

export type Prop = {
  onClick: (event: Event) => void;
};

export const StyledComp = styled.div<Prop>`
  display: flex;
`;

但是它返回类似以下的错误：

TS2769：没有过载与该调用匹配。重载1，共2个，'（属性：Pick ，“ title” |“ slot” | ... 252 more ... |“ is”>＆{...;} ＆StyledComp，“标题” | ... 254更多... |“ is”>＆Partial <...>，“标题” | ... 254更多... |“ is”>＆{... ;}＆{...;}）：ReactElement <...>'，出现以下错误。类型'（event：Event）=> void'不能分配给类型'（（event：MouseEvent ）=> void）＆（（event：Event）=> void）'。类型'（event：Event）=> void'不能分配给类型'（event：MouseEvent ）=> void'。参数“事件”和“事件”的类型不兼容。类型'MouseEvent '不能分配给类型'Event'。属性“目标”的类型不兼容。类型“ EventTarget”中缺少属性“值”，但类型“ {{value：string; }'。重载2，共2个，'（属性：StyledComponentPropsWithAs <“ div”，任何，StyledComp，never>）：ReactElement ，字符串| ... 1更多... | （new（props：any）=> Component <...>）>'，出现以下错误。类型'（event：Event）=> void'不能分配给类型'（（event：MouseEvent ）=> void）＆（（event：Event）=> void）'。类型'（event：Event）=> void'不能分配给类型'（event：MouseEvent ）=> void'。

注意：您可以找到样式化组件和Typescript文档here！

编辑：

这是事件类型：

export type Event = {
  target: {
    value: string;
  };
  stopPropagation: () => void;
  preventDefault: () => void;
};

Answer 1

错误消息的重要部分是

类型'（event：Event）=> void'不能分配给类型'（event：MouseEvent ）=> void'

因此，样式div的onClick属性的类型为(event: MouseEvent<HTMLDivElement, MouseEvent>) => void，并且您想为其分配类型为(event: Event) => void的函数，但这是行不通的，因为类型是不兼容。

您应该改为：

const stopPropagation = (event: MouseEvent<HTMLDivElement, MouseEvent>): void => {
  event.stopPropagation();
};

打字稿，样式组件错误：TS2769：没有重载匹配此调用。重载2之1

1 个答案: