React Typescript 强制 props 中的空数组出现编译时错误

Question

这是我的组件：

import {Button, Tabs} from 'antd';
import * as React from "react";
import {ReactElement} from "react";
import {IBaseComponentProps} from "../BaseComponent/BaseComponent";
const operations = <Button type={"primary"}>Extra Action</Button>;
export interface ITabContent {
title: string,
content: ReactElement<any>
}
interface ITabProps extends IBaseComponentProps {
tabs: ITabContent[]
}
export const Tab: React.SFC<ITabProps> = props => {
const tabs: any = [];
props.tabs.forEach((tab: ITabContent, index: number) => {
tabs.push(<Tabs.TabPane tab={tab.title} key={index}>{tab.content}   </Tabs.TabPane>)
});
return (
<Tabs tabBarExtraContent={operations}>
{...tabs}
</Tabs>
);
};

我想强制我的 props 中的选项卡不为空，最好是我想要一个编译时错误。

我知道你可以在打字稿中使用类型推断做一些类似"OR"的事情：

布尔值 = "假" |"真">

但是我似乎找不到正确键入选项卡的方法。例如，我尝试了类似的东西：

tabs: ITabContent[] & !never[]

但这显然无法编译。是否有我不知道的"&"等效运算符？

Answer 1

非空数组可以强制使用：

interface ITabContentArray extends Array<ITabContent> {
0: ITabContent;
[n: number]: ITabContent;
}
interface ITabProps extends IBaseComponentProps {
tabs: ITabContentArray;
}

或：

interface ITabProps extends IBaseComponentProps {
tabs: ITabContent[] & { 0: ITabContent };
}