我正在尝试使用 TypeScript 元组类型强制传递给 React 组件的子级的顺序。这是一个简化的示例：
type MyComponentProps = {
children?:
| [Header]
| [Header, Body]
| [Header, Footer]
| [Header, Body, Footer]
| [Body]
| [Body, Footer]
| [Footer];
};
const MyComponent: React.FC<MyComponentProps> = ({ children }) => {
return <div>{children}</div>;
};
// Usage
<MyComponent>
<Footer />
<Body />
</MyComponent>;
我预计当子项顺序错误时（例如将 Footer 放在 Body 之前），TypeScript 会抛出错误，但事实并非如此。为什么 TypeScript 在这种情况下不强制执行子级的顺序，以及如何在 React 组件中强制执行此顺序？
同样，
<MyComponent>
<Footer />
<Body />
<Footer />
</MyComponent>
目前已接受，但不应接受（因为页脚只应允许一次）。
我该如何解决这个问题？
编辑：页眉、正文、页脚很明显
const HeaderFun = () => 123;
type Header = ReactElement<typeof HeaderFun>;
// etc.
| [Header, Body, Footer]
这只是允许的子组件的集合，您列出的每个其他实例只是其中的一个子集。此集合中没有任何暗示的顺序。