请问如何对数组类型type提出一条元素 & 其他的type，进而做一个props？

Question

我现在有如下的props

export type TabsCompProps = {
  label: string,
  children: React.ReactNode,
  key: string,
  breadcrumbs: string[] 
}[]


export type DetailProps = {
  content: string 
}

我想要做一个props如下：

type TabsWithDetailProps = {...}[]

TabsWithDetailProps是一个数组，数组里面的元素由TabsCompProps数组提出的一条信息和DetailProps 组成。请问应该如何做呢？

Answer 1

type TabsCompProps = {
  label: string;
  children: React.ReactNode;
  key: string;
  breadcrumbs: string[];
}[];

type DetailProps = {
  content: string;
};

type TabsWithDetailProps = (TabsCompProps[number] & DetailProps)[];

// 示例
const tabsWithDetail: TabsWithDetailProps = [
  {
    label: "Tab 1",
    children: <div>Content 1</div>,
    key: "1",
    breadcrumbs: ["Home", "Tab 1"],
    content: "Detail Content 1",
  },
  {
    label: "Tab 2",
    children: <div>Content 2</div>,
    key: "2",
    breadcrumbs: ["Home", "Tab 2"],
    content: "Detail Content 2",
  },
];

Answer 2

ts-playground

export type TabsCompProps = {
  label: string,
  children: React.ReactNode,
  key: string,
  breadcrumbs: string[] 
}[]


export type DetailProps = {
  content: string 
}

type TabsWithDetailProps = (TabsCompProps[number]&DetailProps)[]
let a:TabsWithDetailProps=[{
  content:'1',
  key:'1',
  breadcrumbs:['1'],
  label:'1',
}]

export type ExpandRecursively<T> = T extends object
  ? T extends infer O
    ? { [K in keyof O]: ExpandRecursively<O[K]> }
    : never
  : T

/** Expand a type */
export type a= ExpandRecursively<TabsWithDetailProps>