React中如何对对象的属性进行约束呢？

Question

请问下，现在有代码如下：

import { TabsWithBreadcrumbs } from '../../components/Common/TabsWithBreadcrumbs'

export const createTabsSlice = (set:any, get:any) => ({

  tabs: [
   { title: 'demo01', due: '2023-05-05' },
   { title: 'demo02', due: '2023-05-06' },
   { title: 'demo03', due: '2023-05-07' }
  ],

  addTab: () => {
    
  },

  removeTab: () => {

  }
})

TabsWithBreadcrumbs如下：

(alias) type TabsWithBreadcrumbs = {
    title: string;
    breadcrumbs: string[];
    key: string;
    children: React.ReactNode;
}[]

这里想要对tabs 参数做类型的约束。

请问两个问题，
1、使用 TabsWithBreadcrumbs 作为约束，应该怎么写呢？
2、如果是想要使用 TabsWithBreadcrumbs（数组）其中一个元素作为约束，又应该怎么写呢？

Answer 1

代码中对象作为函数的返回值，所以如果想约束对象，那么声名函数返回值的类型即可：

type TabsWithBreadcrumbs = {
    title: string;
    breadcrumbs: string[];
    key: string;
    children: React.ReactNode;
};
interface TabsSlice {
    tabs: TabsWithBreadcrumbs[];
}
export const createTabsSlice = (set: any, get: any): TabsSlice => ({
    tabs: [
        { title: "demo01", due: "2023-05-05" },
        { title: "demo02", due: "2023-05-06" },
        { title: "demo03", due: "2023-05-07" },
    ],

    addTab: () => {},

    removeTab: () => {},
});

Answer 2

如果是类型约束的话可以用 interface

interface Tabs {
    title: string,
    due: string,
}

使用例子：useState<Tabs[]>