Preact/Typescript：只允许特定组件作为子组件答案

【问题标题】：Preact/Typescript: Only allow a specific component as childrenPreact/Typescript：只允许特定组件作为子组件
【发布时间】：2021-03-12 09:50:41
【问题描述】：

是否可以只允许特定组件作为子组件？例如：

function ListItem() {
    return (
        <div>
            {this.props.children}
        </div>
    );
}
    
function OrderedList(children: <ListItem>[] /* won't work */ ) {
    return (
        <div>
            {this.props.children}
        </div>
    );
}

【问题讨论】：

渲染时可以检查父组件类型吗？不确定这是否会在 preact 中起作用：stackoverflow.com/questions/55729582/…
似乎儿童可以是这些类型中的任何一种，请查看this post 了解更多详情。同时，我相信this gist 也在尝试做和你一样的事情。
谢谢大家。我并没有试图过滤掉其他类型的孩子，只是想让 Typescript 不编译。我也使用 Preact，而不是 React（如果不清楚的话）。

标签： typescript preact

【解决方案1】：

这不是 Preact 级别的问题。 TypeScript 本身在如何处理 JSX/TSX 方面存在问题。您不能真正强制孩子为特定类型，因为孩子可以是任何东西 - 字符串/数字/布尔/

然而，所有的希望都不会消失。您可以指定该组件应接受任何组件作为children（一个或多个）道具，只要它使用VNode<T> 通用接口满足某些道具。例如：

import { VNode } from 'preact';

interface ChildProps {
  itemTitle: string;
}

function Child(props: ChildProps) {
  return (
    <div>Children</div>
  );
}

export interface ParentProps {
  children: VNode<ChildProps> | VNode<ChildProps>[];
}

function Parent(props: ParentProps) {
  return (
    <div>
      {props.children}
    </div>
  )
}

function App() {
  return (
    <Parent>
      <Child itemTitle='Child 1' />
      <Child itemTitle='Child 2' />
    </Parent>
  );
}

这里唯一的问题是，如果你有一些其他组件，比如 Child2，它接受与 Child1 类似的 props，TypeScript 会很乐意接受。

【讨论】：

感谢您的解释。