Typescript React/Nextjs styled-components - 将函数作为道具传递给组件会在缺少类型时引发错误

Question

I'm new to typescript and struggling with a typescript error while passing down the function "toggle" as a prop to the styled-component "MobileIcon". I have set the function type for "toggle" in the interface IProps and added it to the styled-component.

Layout.tsx:

import { FunctionComponent as FC, ReactNode, useState } from "react";
import Toolbar from "src/components/Toolbar";

interface IProps {
  main: ReactNode;
}

const Layout: FC<IProps> = ({ main }) => {
  const [isOpen, setIsOpen] = useState<boolean>(false);

  const toggle = () => {
    setIsOpen(!isOpen);
    console.log("toggle ok");
  };

  return (
    <div>
      <nav>
        <Toolbar isOpen={isOpen} toggle={toggle} />
      </nav>
      <main>{main}</main>
    </div>
  );
};

export default Layout;

Toolbar.tsx:

import { FunctionComponent as FC } from "react";
import styled from "styled-components";
import Link from "next/link";

// Components
import Brand from "./Brand";

interface IProps {
  isOpen: boolean;
  toggle: () => void;
}

const Toolbar: FC<IProps> = ({ isOpen, toggle }) => {
  return (
    <Container>
      <Link href="/">
        <a>
          <Brand />
        </a>
      </Link>
      <MobileIcon isOpen={isOpen} onClick={toggle}>...</MobileIcon>
    </Container>
  );
};

export default Toolbar;

styled-component:

const MobileIcon = styled.div<IProps>`
...
`

Error:

No overload matches this call.
  Overload 1 of 2, '(props: Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & IProps, never> & Partial<...>, "theme"> & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Property 'toggle' is missing in type '{ children: Element[]; isOpen: boolean; onClick: () => void; }' but required in type 'Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & { ...; } & IProps, never> & Partial<...>, "theme">'.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<"div", any, IProps, never, "div", "div">): ReactElement<StyledComponentPropsWithAs<"div", any, IProps, never, "div", "div">, string | JSXElementConstructor<...>>', gave the following error.
    Property 'toggle' is missing in type '{ children: Element[]; isOpen: boolean; onClick: () => void; }' but required in type 'Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & { ...; } & IProps, never> & Partial<...>, "theme">'.

Any help would be great.

Answer 1

On your JSX, you use your MobileIcon as this:

 <MobileIcon isOpen={isOpen} onClick={toggle}>...</MobileIcon>

So the props of MobileIcon here are isOpen and onClick. You don't have a toggle prop.

Your MobileIcon props interface is then:

interface MobileIconProps = {
   isOpen: boolean;
   onClick: () => void;
}

And can be used as:

const MobileIcon = styled.div<MobileIconProps>

Answer 2

Your IProps specifies a toggle prop. Therefore your MobileIcon component also expects that prop, yet you don't specify it in your Toolbar component.

Perhaps you didn't want your MobileIcon to use the props specified by IProps , but just {} (no props) instead. After all, a div doesn't have isOpen or toggle .