React Typescript Принудительная ошибка времени компиляции для пустого массива в реквизитах

Вот моя составляющая:

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

Я хочу, чтобы вкладки в моих реквизитах не были пустыми, желательно, чтобы ошибка времени компиляции.

Я знаю, что вы можете сделать что-то вроде «ИЛИ» с выводом типа в машинописном тексте:

boolean = "false" | "правда"

Но я не могу понять, как правильно набирать вкладки. Например, я пробовал что-то вроде:

tabs: ITabContent[] & !never[]

Но это явно не компилируется. Есть ли оператор, эквивалентный «&», о котором я не знаю?

Что вы имеете в виду, говоря «Я хочу, чтобы вкладки в моем реквизите не были пустыми»? вы можете указать разрешенный тип как tabs: ITabContent[], он разрешит только массив с этими свойствами

Niladri 15.05.2018 17:17
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
1
413
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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 };
}

Другие вопросы по теме