样式化组件 + 打字稿："as"不能分配给类型内部属性

Question

我有一个单orepo，它包含一个由样式组件组成的设计系统。在这个设计系统中，我有一个Heading组件，它使用'level'道具来调整标题的CSS。

标题

export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
level: 'colossus' | 'uber' | 'hero' | '1' | '2' | '3' | '4' | '5'
}
export const Heading: React.FC<HeadingProps> = ({ level = '1', children, ...rest }) => {
return (
<HeadingStyled level={level} {...rest}>
{children}
</HeadingStyled>
)
}

使用

要使用这个Heading组件，我只需传递一个level给它的样式和asprop来调整HTML的呈现。

<Heading as="h2" level="2">
Header 2
</Heading>

当我使用这个组件时，我在asprop上得到一个打字错误

Type '{ children: string; as: string; level: "2"; }' is not assignable to type 'IntrinsicAttributes & HeadingProps & { children?: ReactNode; }'.
Property 'as' does not exist on type 'IntrinsicAttributes & HeadingProps & { children?: ReactNode; }'.

I have try:

export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
level: 'colossus' | 'uber' | 'hero' | '1' | '2' | '3' | '4' | '5'
as?: React.Element | JSX.Element | JSX.IntrinsicElements
}

Answer 1

你很接近了!JSX.IntrinsicElements是一个接口，其键为HTML标签的标签。它本身并不是所有HTML标签的联合。

这意味着你所需要做的就是

interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
// ...
as?: keyof JSX.IntrinsicElements // Note the keyof!
}

现在as的签名被TS显示为:

(JSX attribute) HeadingProps.as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | ... 156 more ... | undefined

这意味着你的代码现在将完全按照预期工作

<Heading as="h2" level="2"> // No TS errors! ✅
Header 2
</Heading>

TS playground link

Answer 2

完成@Aron的回答，这段代码为我工作(styled-component + styled-system)

{ as?: ComponentType<any> | keyof JSX.IntrinsicElements | string | undefined }