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

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 of 2, '(props: Pick, "title" | "slot" | ... 252 更多 ... | "is"> & { ...; } & StyledComp, "title" | ... 254 更多 ... | "is"> & Partial<...>, "title" | ... 254 更多 ... | "is"> & { ... ; } & { ...; }): ReactElement<...>'，给出以下错误。类型 '(event: Event) => void' 不可分配给类型 '((event: MouseEvent) => void) & ((event: Event) => void)'。类型 '(event: Event) => void' 不可分配给类型 '(event: MouseEvent) => void'。参数 'event' 和 'event' 的类型不兼容。类型“MouseEvent”不可分配给类型“事件”。属性“目标”的类型不兼容。类型“EventTarget”中缺少属性“值”，但类型“{ value: string; }'。重载 2 of 2, '(props: StyledComponentPropsWithAs): ReactElement, string | ... 1 更多 ... | (new (props: any) => Component<...>)>'，给出了以下错误。类型 '(event: Event) => void' 不可分配给类型 '((event: MouseEvent) => void) & ((event: Event) => void)'。类型 '(event: Event) => void' 不可分配给类型 '(event: MouseEvent) => void'。

注意：您可以找到 styled-component&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();
};