reactjs - 从 styled-component 推断 Prop 接口(interface)

Question

我试图推断我的组件的 Props尽可能多地导出它们。这不是类和函数组件的问题，但如果我尝试推断 Props styled-component的接口(interface), Prop 输入为 any这并不理想。

interface Props {
  bgColor: string;
  children: React.ReactNode;
}

const Box = styled.div<Props>`
  background-color: ${(p) => p.bgColor};
`;

const Button = (props: Props) => (
  <button style={{ backgroundColor: props.bgColor }}>{props.children}</button>
);

type ButtonInferredProps = React.ComponentProps<typeof Button>;

type BoxInferredProps = React.ComponentProps<typeof Box>;

const OtherBox = (props: BoxInferredProps) => (
  <div style={{ backgroundColor: props.bgColor }}>{props.children}</div>
);

const OtherButton = (props: ButtonInferredProps) => (
  <button style={{ backgroundColor: props.bgColor }}>{props.children}</button>
);

export default function App() {
  return (
    <>
      <Box bgColor="red">Hi! I'm a box! </Box>
      <OtherBox bgColor="purple" backgroundColor="red">
        Hi! I'm another box
      </OtherBox>
      <Button bgColor="blue">Hi! I'm a button</Button>
      <OtherButton bgColor="green">Hi! I'm another button</OtherButton>
    </>
  );
}

与 Box成为 styled-component ，我无法正确推断其 Props 接口(interface)。当我创建另一个尝试使用推断的 Props 类型的组件时，它会以任何方式出现:

const OtherBox = (props: BoxInferredProps) => (
  {/* TS won't complain that `props` doesn't have a `iAmNotTyped` property which is desired... */}
  <div style={{ backgroundColor: props.iAmNotTyped}}>{props.children}</div>
);

https://codesandbox.io/s/styled-components-typescript-forked-7cq4q?file=/src/App.tsx

Answer 1

您的 Box 样式组件的类型显示为 StyledComponent<"div", any, Props, never> .所以你可以使用 typescript 的infer关键字从该类型定义中提取 Prop 。

import {StyledComponent} from "styled-components";

type StyledComponentProps<T> = T extends StyledComponent<any, any, infer P, any> ? P : never

type BoxInferredProps = StyledComponentProps<typeof Box>;

现在，当您尝试分配 backgroundColor 时，正如预期的那样，您会遇到 typescript 错误。在其他盒子上。