如何使用 Preact 和 TypeScript 对子组件进行类型检查？

Posted 2023-02-16

【中文标题】如何使用 Preact 和 TypeScript 对子组件进行类型检查？

【英文标题】：How to type check component children with Preact and TypeScript?

【发布时间】：2019-01-19 06:35:41

【问题描述】：

是否可以使用 TypeScript (v3.0.1) 和 Preact (v8.3.1) 对子组件进行类型检查？在 React 中有一个 ReactElement<T> 。 Preact 中有类似的东西吗？

我有一个menu 组件，它只能有menuItem 子组件。如何使用 TypeScript 在 Preact 中强制执行？使用 React，我可以执行以下操作：

interface Props 
    children?: React.ReactElement<MenuItem>[] | React.ReactElement<MenuItem>;

我知道ReactElement是在preact-compat中实现的，但我不想使用它。

感谢您的任何建议！

【参考方案1】：

现在最简单的选项可能是 ComponentChildren 类型（请参阅此提交：https://github.com/preactjs/preact/commit/cd422d047f6d21607ff980c84b9c4ac1845ca798）。例如：

import  h  from "preact";

import type  ComponentChildren  from "preact";

type Props = 
  children: ComponentChildren;


export function ComponentWithChildren(props: Props) 
  return (
    <div>
      props.children
    </div>
  );

【参考方案2】：

Preact 的 ReactElement 等价物称为 VNode（虚拟 DOM 节点）。我绝不是 TypeScript 专家，但我相信您的示例可以如下工作：

interface Props 
    children?: VNode<MenuItem>[] | VNode<MenuItem>;

在 Preact 8.3.0 之前，我认为我们依赖 JSX.Element 而不是 VNode。

【讨论】：

感谢您的回答！好吧，它编译，但它也编译，当孩子不是 MenuItem 像 <div> 时。

您使用的是 Preact 8.3.0+ 吗？

是的，我在"preact": "^8.3.1",。