省略情感风格组件中的特定道具？

Question

我有一个BoxWithAs组件，定义如下：

\n

const BoxWithAs = styled.div(\n  {\n    WebkitFontSmoothing: \'antialiased\',\n    MozOsxFontSmoothing: \'grayscale\'\n    // And more \xe2\x80\xa6\n  }\n);\n

\n

一切都很好，但现在我想弃用来自 的默认道具之一@emotion/styled，特别是asprop.

\n

我这样做了：

\n

type BoxWithAsType = typeof BoxWithAs;\ntype BoxProps = Omit<React.ComponentProps<BoxWithAsType>, \'as\'>;\n\n/**\n * Component that does it all.\n */\nconst Box = (props: BoxProps) => {\n  return <BoxWithAs {...props}>{props.children}</BoxWithAs>;\n};\n

\n

它确实删除了道具...

\n

\n

...但现在组件本身丢失了所有StyledComponent类型信息。

\n

\n

我如何构建这个才能实现两者？我的最终目标是弃用该as道具，而是鼓励使用.withComponent（出于 Typescript 的原因）。

\n

Answer 1

如果我们将鼠标悬停在上面，BoxWithAs我们会看到它是这种类型：

StyledComponent<{
    theme?: Theme | undefined;
    as?: React.ElementType<any> | undefined;
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>

所以你可以这样做：

type BoxWithoutAs = StyledComponent<{
    theme?: Theme | undefined;
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

const Box = BoxWithAs as BoxWithoutAs;

但这种类型确实又长又笨重。我们尝试简化它并使其变得更干燥：

StyledComponent<Omit<React.ComponentProps<BoxWithAsType>, "as">, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>

这并没有好多少，甚至可以说更糟。如果我们能够推断出其他两个参数而不是让我们完整地输入它，那么会有帮助。

我们可以使用辅助实用程序类型：

type OmitProps<Component, Props extends PropertyKey> = Component extends StyledComponent<infer P, infer S, infer J> ? StyledComponent<Omit<P, Props>, S, J> : never;

现在，TypeScript 将为我们推断其他两个参数，我们可以使用它Omit<P, Props>来省略任何我们想要的 props。

const Box = BoxWithAs as OmitProps<BoxWithAsType, "as">;

似乎工作正常！

操场