函数属性与泛型的 TypeScript 组合

此类型的要点是允许用户传入数据、颜色、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.

操场