[英]Typescript, styled-component error: TS2769: No overload matches this call. Overload 1 of 2
這是我的樣式組件:
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<Pick<Pick<DetailedHTMLProps<HTMLAttributes, HTMLDivElement>, "title" | "slot" | ... 252 more ... | "is"> & { ...; } & StyledComp, "title" | ... 254 更多... | "is"> & Partial<...>, "title" | ... 254 更多... | "is"> & { ... ; } & { ...; }): ReactElement<...>',給出了以下錯誤。 類型 '(event: Event) => void' 不能分配給類型 '((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) & ((event: Event) => void)'。 類型 '(event: Event) => void' 不能分配給類型 '(event: MouseEvent<HTMLDivElement, MouseEvent>) => void'。 參數“事件”和“事件”的類型不兼容。 類型 'MouseEvent<HTMLDivElement, MouseEvent>' 不能分配給類型 'Event'。 屬性“目標”的類型不兼容。 “EventTarget”類型中缺少屬性“value”,但類型“{ value: string;”中需要。 }'。 重載 2 of 2, '(props: StyledComponentPropsWithAs<"div", any, StyledComp, never>): ReactElement<StyledComponentPropsWithAs<"div", any, StyledComp, never>, string | ... 1 更多... | (new (props: any) => Component<...>)>',給出了以下錯誤。 類型 '(event: Event) => void' 不能分配給類型 '((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) & ((event: Event) => void)'。 類型 '(event: Event) => void' 不能分配給類型 '(event: MouseEvent<HTMLDivElement, MouseEvent>) => void'。
注意:你可以在這里找到 styled-component&Typescript 文檔!
編輯:
這是事件類型:
export type Event = {
target: {
value: string;
};
stopPropagation: () => void;
preventDefault: () => void;
};
錯誤消息的重要部分是
類型 '(event: Event) => void' 不能分配給類型 '(event: MouseEvent<HTMLDivElement, MouseEvent>) => void'
因此,樣式 div 的onClick
屬性的類型為(event: MouseEvent<HTMLDivElement, MouseEvent>) => void
並且您想為其分配類型為(event: Event) => void
的函數,但這不起作用,因為類型不兼容。
你應該寫:
const stopPropagation = (event: MouseEvent<HTMLDivElement, MouseEvent>): void => {
event.stopPropagation();
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.