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

相当于ReactElement的Preact称为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输入检查子组件的类型？

2 个答案: