我正在尝试创造一个界面
export interface MenuItem {
title: string;
component?: any;
click?: any;
icon: string;
}
是否有方法要求组件或单击进行设置 是否有一种方法要求两个属性都不能设置?
我正在尝试创造一个界面
export interface MenuItem {
title: string;
component?: any;
click?: any;
icon: string;
}
是否有方法要求组件或单击进行设置 是否有一种方法要求两个属性都不能设置?
当前回答
有一个更简单的解决方案。不需要依赖任何 复杂条件类型(见答案):
是否有方法要求组件或单击进行设置?(包容或)
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常用于说明。
其他回答
没有多个接口的替代方案是
export type MenuItem = {
title: string;
component: any;
icon: string;
} | {
title: string;
click: any;
icon: string;
};
const item: MenuItem[] = [
{ title: "", icon: "", component: {} },
{ title: "", icon: "", click: "" },
// Shouldn't this error out because it's passing a property that is not defined
{ title: "", icon: "", click: "", component: {} },
// Does error out :)
{ title: "", icon: "" }
];
我在如何创建一个需要设置单个属性的Partial-like中问过类似的问题
上面的内容可以简化,但它可能更容易阅读,也可能不容易
export type MenuItem = {
title: string;
icon: string;
} & (
{component: any} | {click: string}
)
注意,这些都不会阻止你同时添加两者,因为TypeScript确实允许在使用AND/OR的对象上添加额外的属性,请参阅https://github.com/Microsoft/TypeScript/issues/15447
有一个更简单的解决方案。不需要依赖任何 复杂条件类型(见答案):
是否有方法要求组件或单击进行设置?(包容或)
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是必需的。
这种方法结合了never和省略。这样做的好处是易于理解,如果需要添加更多属性,也易于更新。
interface Base {
title: string;
icon: string;
component?: never;
click?: never;
}
interface OnlyComponent {
component: any;
}
interface OnlyClick {
click: any;
}
export type MenuItem = (Omit<Base, 'component'> & OnlyComponent) | (Omit<Base, 'click'> & OnlyClick);
你可以使用in来缩小MenuItem的一个实例:
const item: MenuItem = {
title: 'A good title';
icon: 'fa-plus';
component: SomeComponent;
};
//...
if('component' in item) {
const Comp = item.component;
//...
}
只是延伸到上面的酷答案!对于登陆这里的人,同时寻找一个需要能力的部分版本!这里有一个片段,我要采取!
PartialReq
你想要一个接口的部分,但同时需要一些字段!这是如何做到的
export type PartialReq<T, Keys extends keyof T = keyof T> =
Pick<Partial<T>, Exclude<keyof T, Keys>>
& {
[K in Keys]: T[K]
};
使用的例子
export interface CacheObj<SigType = any, ValType = any> {
cache: Map<SigType, ValType>,
insertionCallback: InsertionCallback<SigType, ValType> // I want this to be required
}
// ...
export class OneFlexibleCache<SigType = any, ValType = any> {
private _cacheObj: CacheObj<SigType, ValType>;
constructor(
cacheObj: PartialReq<CacheObj<SigType, ValType>, 'insertionCallback'> // <-- here
// i used it
) {
cacheObj = cacheObj || {};
this._cacheObj = {
// ...
// _______________ usage
this._caches.set(
cacheSignature,
new OneFlexibleCache<InsertionSigType, InsertionValType>({
insertionCallback // required need to be provided
})
);
在这里你可以看到它工作得很完美
如未提供要求
更新:对于我在这里暗示的用法,一个更好的答案
我刚从医生那里找到了奥米特。
https://www.typescriptlang.org/docs/handbook/utility-types.html#omittk
我是来加的。但在此之前,我看到了一个很酷的答案。它涵盖了所有:
https://stackoverflow.com/a/48216010/7668448
看看吧!它展示了如何为所有不同版本的Typescript做这件事!为了不重复!去看看!