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

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

信息：React:16.12，样式化组件：5.2.0，带有typescript的盖茨比：4.0.2。我还有@types用于react和样式化组件

这是组件

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;

从“React”导入React；
从“样式化组件”导入样式化；
从“/WorkDisplayImage”导入WorkDisplayImage；
类型WorkDisplayProps={
图像源：字符串；
imageAlt：字符串；
链接项目：字符串；
链接代码？：字符串；
projectName:string；
项目类型：字符串；
网格区域：字符串；
};
const StyledWorkDisplay=styled.a`//props.gridArea}；
`;
常数工作显示=({
图像源，
imageAlt，
链接项目，
链接代码，
项目名称，
项目类型，
}：WorkDisplayProps）：JSX.Element=>(
//，给出了以下错误。
类型“{children:Element；href:string；target:string；}”缺少类型“Pick”中的以下属性：imageSource、imageAlt、LinkTopProject、projectName和其他2个

那么，typescript抱怨是因为我没有使用StyledWorkDisplay组件上的所有道具，还是因为其他原因？是的，您需要传递您在
WorkDisplayProps
中定义的所有非可选道具

然而，用家长的所有道具键入链接似乎并不正确，您可以使用一个选择来获取您实际使用的道具

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">
...


constyledWorkDisplay=styled.a`
网格区域：${（props）：字符串=>props.gridArea}；
`;
...
项目名称，
项目类型，
网格区域，
}：WorkDisplayProps）：JSX.Element=>(
...