没有重载匹配此调用。 React 中的 Typescript 和 StyledComponents

Posted 2023-03-15

【中文标题】没有重载匹配此调用。 React 中的 Typescript 和 StyledComponents

【英文标题】：No overload matches this call. Typescript and StyledComponents in React

【发布时间】：2021-02-10 09:36:24

【问题描述】：

好的，我一直遇到这个错误消息，我不太明白。

信息：React：16.12，样式化组件：5.2.0，带有打字稿的 Gatsby：4.0.2。我也有用于 react 和 styled-components 的 @types。

这是组件。

import React from "react";
import styled from "styled-components";
import WorkDisplayImage from "./WorkDisplayImage";

type WorkDisplayProps = 
  imageSource: string;
  imageAlt: string;
  linkToProject: string;
  linkToCode?: string;
  projectName: string;
  projectType: string;
  gridArea: string;
;

const StyledWorkDisplay = styled.a<WorkDisplayProps>` // <- I defined the type here.
  grid-area: $(props): string => props.gridArea;
`;

const WorkDisplay = (
  imageSource,
  imageAlt,
  linkToProject,
  linkToCode,
  projectName,
  projectType,
: WorkDisplayProps): JSX.Element => (
  <StyledWorkDisplay href=linkToProject target="noreferrer opener"> // <- But this component is underlined with the error.
    <WorkDisplayImage imageSource=imageSource imageAlt=imageAlt />
  </StyledWorkDisplay>
);

export default WorkDisplay;

这是打字稿的错误消息。

没有重载匹配这个调用。

重载 1 of 2, '(props: Pick, "slot" | ... 262 more ... | "referrerPolicy"> & ...; & WorkDisplayProps, "slot" | ... 270 更多 ... | "gridArea"> & Partial<...>, "slot" | ... 270 更多 ... | "gridArea"> & ...; & ...; ): ReactElement<...>'，给出了以下错误。 类型'孩子：元素； href：字符串；目标：字符串； ' 缺少以下类型的属性 'Pick, "slot" | ... 262 更多... | "referrerPolicy"> & ...; & WorkDisplayProps，“插槽”| ... 270 更多 ... | "gridArea"> & 部分<...>, "slot" | ... 270 更多 ... | "gridArea">'：imageSource、imageAlt、linkToProject、projectName 等 2 个。 重载 2 of 2, '(props: StyledComponentPropsWithAs): ReactElement, string | ... 1 更多 ... | (new (props: any) => Component<...>)>'，给出了以下错误。 类型'孩子：元素； href：字符串；目标：字符串； ' 缺少以下类型的属性 'Pick, "slot" | ... 262 更多... | "referrerPolicy"> & ...; & WorkDisplayProps，“插槽”| ... 270 更多 ... | "gridArea"> & 部分<...>, "slot" | ... 270 更多 ... | "gridArea">'：imageSource、imageAlt、linkToProject、projectName 等 2 个。

那么，打字稿抱怨是因为我没有使用 StyledWorkDisplay 组件上的所有道具，还是其他原因？

【参考方案1】：

是的，您需要传递您在WorkDisplayProps 中定义的所有非可选道具

但是，使用父级的所有道具键入链接似乎不正确，您可以使用 Pick 来仅获取您实际使用的链接

const StyledWorkDisplay = styled.a<Pick<WorkDisplayProps, 'gridArea'>>`
  grid-area: $(props): string => props.gridArea;
`;

...
  projectName,
  projectType,
  gridArea,
: WorkDisplayProps): JSX.Element => (
  <StyledWorkDisplay gridArea=gridArea href=linkToProject target="noreferrer opener">
...