如果存在其他道具，则完全包括Typescript接口道具

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，它表示当且仅当提供form或true时需要values和onSubmit。

Answer 1

您可以使用条件类型来完成此操作。我们检查泛型的值，并根据form是否定义为true返回不同的类型。

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

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

请注意，typescript检查的是form的类型，而不是form的值，因此在任何想要返回精化类型的函数中使用适当的泛型是很重要的。FormPropsUnion<MyDialogProps>的类型将具有可选属性，因为我们不知道form将始终为true。

但是，如果我们处理的是MyDialogProps的一个特定实例，那么我们就可以根据form的值使用泛型P extends MyDialogProps来获得正确的类型。

declare function makeProps<P extends MyDialogProps>(props: P): FormPropsUnion<P>;
const one = makeProps({title: "", form: true}); // required fields 
const two = makeProps({title: ""}); // optional fields

打字游戏场链接