此类型的要点是允许用户传入数据、颜色、hasColor or 数据、信息、hasInfo。不是任何其他组合。
type Props = {
data: string;
} & (
| {
info?: string;
hasInfo?: boolean;
color?: never;
hasColor?: never;
}
| {
info?: never;
hasInfo?: never;
color?: string;
hasColor?: boolean;
}
);
function foo(props: Props) {
console.log("bar");
}
foo({ data: "hello", info: "hello", hasInfo: true }); <----- TypeScript is happy
foo({ data: "hello", info: "hello", hasColor: true }); <----- TypeScript gives Error
有没有更干净的方法来使用泛型来实现这种行为？
我尝试了这个，但看起来我以某种方式搞乱了三元的逻辑：
type Info = { info: string; hasInfo: boolean };
type Color = { color: string; hasColor: boolean };
type Data = { data: string };
function foo<T>(
props: keyof T extends keyof Info ? Data & Info : Data & Color
) {
console.log("bar");
}
foo({ data: "hello", color: "hello", hasColor: true }); <----TypeScript gives Error
第一种方法可行，但看起来很难看。
根据您当前的定义，TypeScript 无法推断类型参数T，因此推断为unknown调用函数时。所以，keyof T只是never并且条件总是解析为 false 分支。
为了解决这个问题，我们可以将条件的结果与T.
function foo<T>(
props: keyof Info extends keyof T
? Data & Info & T
: Data & Color & T
) {
console.log("bar");
}
另请注意，我们必须切换keyof T extends keyof Info to keyof Info extends keyof T. keyof T将是更大的联盟，因此无法扩展keyof Info.
操场
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
