Question

我有以下界面：

interface MyDialogProps extends DialogProps {
  title: string;
  subtitle?: string;
  action?: React.ReactNode;
  form?: boolean;
}

interface MyFormProps <Values extends object> {
  values: Values;
  onSubmit: (values: Values) => Promise <{}> ;
}

在这两个接口之间我需要一个联合/交集type，该事实表示以下事实：{且仅当提供了values或{时，onSubmit和form都是必需的{1}}。

Answer 1

您可以使用conditional types进行此操作。我们检查泛型的值，并根据form是否定义为true返回不同的类型。

type FormPropsUnion<Values extends { form?: boolean }> =
    Values extends { form: true }
    ? MyFormProps<Values>
    : Partial<MyFormProps<Values>>

当form为true时，需要values和onSumbit，而当form为false或undefined时，这些字段是可选的。

请注意，打字稿正在检查form的 type ，而不是form的 value ，因此务必使用适当的字体要返回精炼类型的任何函数中的泛型。 FormPropsUnion<MyDialogProps>的类型将具有可选属性，因为我们不知道form始终为真。

但是，如果我们要处理MyDialogProps的特定实例，则可以根据P extends MyDialogProps的值使用泛型form获取正确的类型。

declare function makeProps<P extends MyDialogProps>(props: P): FormPropsUnion<P>;

const one = makeProps({title: "", form: true}); // required fields 

const two = makeProps({title: ""}); // optional fields

Typescript Playground Link

如果存在另一个道具，则完全包含Typescript接口道具

1 个答案: