我正在尝试创造一个界面
export interface MenuItem {
title: string;
component?: any;
click?: any;
icon: string;
}
是否有方法要求组件或单击进行设置 是否有一种方法要求两个属性都不能设置?
我正在尝试创造一个界面
export interface MenuItem {
title: string;
component?: any;
click?: any;
icon: string;
}
是否有方法要求组件或单击进行设置 是否有一种方法要求两个属性都不能设置?
当前回答
我喜欢将Pick与包含所有属性的基本类型一起使用,以建立这些类型的条件需求。
interface MenuItemProps {
title: string;
component: any;
click: any;
icon: string;
}
export interface MenuItem =
Pick<MenuItemProps, "title" | "icon" | "component"> |
Pick<MenuItemProps, "title" | "icon" | "click">
这样既干净又灵活。您可以任意地复杂化您的需求,断言诸如“需要所有属性,只需要这两个属性,或者只需要这一个属性”之类的东西,同时保持您的声明简单易读。
其他回答
有一个更简单的解决方案。不需要依赖任何 复杂条件类型(见答案):
是否有方法要求组件或单击进行设置?(包容或)
type MenuItemOr = {
title: string;
icon: string;
} & ({ component: object } | { click: boolean })
// brackets are important here: "&" has precedence over "|"
let testOr: MenuItemOr;
testOr = { title: "t", icon: "i" } // error, none are set
testOr = { title: "t", icon: "i", component: {} } // ✔
testOr = { title: "t", icon: "i", click: true } // ✔
testOr = { title: "t", icon: "i", click: true, component: {} } // ✔
联合类型(|)对应于包含或。它与非条件属性相交。
使用in操作符将值缩小到其中一个组成部分:
if ("click" in testOr) testOr.click // works
是否有一种方法要求两个属性都不能设置?(异或或除外)
type MenuItemXor = {
title: string;
icon: string;
} & (
| { component: object; click?: never }
| { component?: never; click: boolean }
)
let testXor: MenuItemXor;
testXor = { title: "t", icon: "i" } // error, none are set
testXor = { title: "t", icon: "i", component: {} } // ✔
testXor = { title: "t", icon: "i", click: true } // ✔
testXor = { title: "t", icon: "i", click: true, component: {} } //error,both set
基本上任何一个组件或点击都可以设置,另一个永远不要同时添加。TS可以从MenuItemXor中生成一个有区分的联合类型,它对应于XOR。
对于已接受的答案,MenuItemXor的此异或条件是不可能的。
操场上
从技术上讲,道具?:从来没有决心去支持?:未定义,尽管former常用于说明。
我用这个:
type RequireField<T, K extends keyof T> = T & Required<Pick<T, K>>
用法:
let a : RequireField<TypeA, "fieldA" | "fieldB">;
这使得fieldA和fieldB是必需的。
还有另一个解决方案:
type RequiredKeys<T, K extends keyof T> = Required<Pick<T, K>> & Omit<T, K>;
type MenuItem2 = RequiredKeys<MenuItem, "component" | "click">;
我喜欢将Pick与包含所有属性的基本类型一起使用,以建立这些类型的条件需求。
interface MenuItemProps {
title: string;
component: any;
click: any;
icon: string;
}
export interface MenuItem =
Pick<MenuItemProps, "title" | "icon" | "component"> |
Pick<MenuItemProps, "title" | "icon" | "click">
这样既干净又灵活。您可以任意地复杂化您的需求,断言诸如“需要所有属性,只需要这两个属性,或者只需要这一个属性”之类的东西,同时保持您的声明简单易读。
最后我这样做了:
export interface MenuItem {
title: string;
icon: string;
}
export interface MenuItemComponent extends MenuItem{
component: any;
}
export interface MenuItemClick extends MenuItem{
click: any;
}
然后我用了:
appMenuItems: Array<MenuItemComponent|MenuItemClick>;
但希望有一种方法可以用单一界面来建模。