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

Question

是否可以使用 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 中实现，但我不想使用它。

感谢您的任何建议！

Answer 1

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

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

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

Answer 2

现在最简单的选项可能是 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>
  );
}

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

How to type check component children with Preact and TypeScript?

reactjs

typescript

preact