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

作者站长头像
站长
· 阅读数 18

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


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（数组）其中一个元素作为约束，又应该怎么写呢？

回复
1个回答
avatar
test
2024-06-27

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

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: () => {},
});
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容