React Typescript Forcing a compile time error for empty array in props

Question

Here is my component:

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>
  );
};

I want to force tabs in my props to not be empty, preferably I would like a compile time error.

I know you can do something like a "OR" with type inference in typescript:

boolean = "false" | "true"

But I can't seem to figure out a way to type tabs correctly. For example, I tried something like :

tabs: ITabContent[] & !never[]

But this obviously doesn't compile. Is there an equivalent operator to "&" that I am not aware of?

What do you mean by "I want to force tabs in my props to not be empty" ? you can specify the allowed type as tabs: ITabContent[] it will only allow array with those properties — Niladri
– Niladri, Commented May 15, 2018 at 15:17

Estus Flask · Accepted Answer · 2018-05-15 15:29:35Z

1

Non-empty array can be forced with:

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

interface ITabProps extends IBaseComponentProps {
  tabs: ITabContentArray;
}

Or:

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

answered May 15, 2018 at 15:29

Estus Flask

227k79 gold badges478 silver badges621 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Typescript Forcing a compile time error for empty array in props

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related