使用带有 typescript 的 props.children 和 styled-component "as" 道具

Question

我浏览了几个现有的解决方案和帖子，但实际上找不到任何解决方案。

因此，我将 React 与 Typescript 和样式组件一起使用。

我的项目的一部分是Heading组件。 理想情况下，我想像<Heading level={2}>Hello world!</Heading>一样在需要的地方使用它。

这是它的简化 Codesandbox 代码

然而， <S.Heading在我的 Linter 中抛出了错误，尽管它似乎在视觉上起作用。

错误

这个 JSX 标签的 'children' 属性期望类型 'never' 需要多个孩子，但只提供了一个孩子。ts(2745)

没有重载匹配此调用。 这个 JSX 标记的 'children' 属性需要类型 'never'，它需要多个孩子，但只提供了一个孩子。ts(2769)

不确定我的代码有什么问题，因为我认为我遵循了大多数建议..

Answer 1

Typescript 模板文字类型并不像您想象的那么聪明。 您可能期望h${props.level}评估为联合类型"h1" | "h2" |... "h1" | "h2" |...基于你的props.level变量的类型。 相反，它只是string 。 因此，您需要在代码中的某处使用as断言，以声明此string是JSX.IntrinsicElements的有效键。

获得联合"h1" | "h2" |... "h1" | "h2" |...作为一种类型很难，因为Props['level']是number文字而不是string文字的联合。 但是我们并不真正需要联合，因为它是哪种标题类型并不重要。 你可以使用as "h1" ，你会没事的。

export default function Heading(props: Props) {
  return <S.Heading as={`h${props.level}` as "h1"}>{props.children}</S.Heading>;
}

---

出于好奇，我想看看是否可以从JSX.IntrinsicElements中提取有效的h*标签。 我想出了一个几乎可以根据字符串长度工作的解决方案，但我忘记了hr ！

type HTag = {
    [K in keyof JSX.IntrinsicElements]: K extends `h${string}${infer B}` ? B extends "" ? K : never : never
}[keyof JSX.IntrinsicElements]

评估为：

"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "hr"