React Typescript道具验证;如何验证两个道具项目不同时存在

Question

我正在React Typescript中开发一个可重用组件。我需要将我的道具OnClick和组件验证为

1. onClick和component-prop都是可选的。只有当我需要将这些道具配置为组件时，我才会将它们传递给组件
2. 两者不得同时传递到组件。即，如果我传入onClick，则不应传入组件道具。同样，如果我传出分量则不应传出on-Click道具

我尝试了不同的组合；这是我遇到的最好的情况；

interface Common {
/** common items **/
} 
interface WithOnClick extends Common {
onClick: () => void;
component: never;
}
interface WithComponent extends Common {
onCick: never;
component: React.ReactElement<HTMLElement>
}
interface Main = WithComponent | WithOnClick | Common;

但这仍然会引起问题，因为它总是解决公共；

有没有任何可能的方法来定义我的场景的类型。还是我做错了什么？

Answer 1

您可以使用XOR类型。

type XOR<T, U> = T | U extends object
?
| ({ [P in Exclude<keyof T, keyof U>]?: never } & U)
| ({ [P in Exclude<keyof U, keyof T>]?: never } & T)
: T | U;

所以你的界面会变成

interface WithOnClick extends Common {
onClick: () => void;
}
interface WithComponent extends Common {
component: React.ReactElement<HTMLElement>
}

onClick和component-prop都是可选的。

你可以用这个的类型玩一点