No overload matches this call. Typescript and StyledComponents in React

0
votes

Ok, I keep running into this error message and I don't quite understand this.

Info : React: 16.12, Styled-components: 5.2.0, Gatsby with typescript: 4.0.2. I have @types for react and styled-components too.

Here is the component.

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;

Here is typescript's mess of an error message.

No overload matches this call.

Overload 1 of 2, '(props: Pick<Pick<Pick<DetailedHTMLProps<AnchorHTMLAttributes, HTMLAnchorElement>, "slot" | ... 262 more ... | "referrerPolicy"> & { ...; } & WorkDisplayProps, "slot" | ... 270 more ... | "gridArea"> & Partial<...>, "slot" | ... 270 more ... | "gridArea"> & { ...; } & { ...; }): ReactElement<...>', gave the following error. Type '{ children: Element; href: string; target: string; }' is missing the following properties from type 'Pick<Pick<Pick<DetailedHTMLProps<AnchorHTMLAttributes, HTMLAnchorElement>, "slot" | ... 262 more ... | "referrerPolicy"> & { ...; } & WorkDisplayProps, "slot" | ... 270 more ... | "gridArea"> & Partial<...>, "slot" | ... 270 more ... | "gridArea">': imageSource, imageAlt, linkToProject, projectName, and 2 more. Overload 2 of 2, '(props: StyledComponentPropsWithAs<"a", any, WorkDisplayProps, never>): ReactElement<StyledComponentPropsWithAs<"a", any, WorkDisplayProps, never>, string | ... 1 more ... | (new (props: any) => Component<...>)>', gave the following error. Type '{ children: Element; href: string; target: string; }' is missing the following properties from type 'Pick<Pick<Pick<DetailedHTMLProps<AnchorHTMLAttributes, HTMLAnchorElement>, "slot" | ... 262 more ... | "referrerPolicy"> & { ...; } & WorkDisplayProps, "slot" | ... 270 more ... | "gridArea"> & Partial<...>, "slot" | ... 270 more ... | "gridArea">': imageSource, imageAlt, linkToProject, projectName, and 2 more.

So, is typescript complaining because I'm not using all the props on the StyledWorkDisplay component, or is it something else?

1
reactjstypescriptgatsbystyled-components

1 Answers

1
votes

Yes, you need to pass all not optional props you defined in WorkDisplayProps

However, it doesn't seem right to type your link with all the props of the parent, you could use a Pick to get only the one you're actually using

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