需要布尔属性

Question

我有一个自定义的Form元素，它的类型需要一个多部分参数，当它通过时，表单将是一个FormData表单，如果不是，它将是一个JSON表单，我想这样做：

<CustomForm<DataFields> ...arguments>  (JSON FORM)
    ...
</CustomForm>

<CustomForm<DataFields> multipart ...arguments>  (MULTIPART FORM)
    ...
</CustomForm>

但当我执行第一个（JSON 形式）时，它实际上显示了输入错误，相反，我需要这样做：

<CustomForm<DataFields> multipart={false} ...arguments>  (JSON FORM)
    ...
</CustomForm>

这是我得到的错误：

Type '{ children: Element[]; onSubmit: () => void; }' is not assignable to type 'IntrinsicAttributes & CustomFormProps<FieldValues>'.
  Property 'multipart' is missing in type '{ children: Element[]; onSubmit: () => void; }' but required in type '{ multipart: false | void | null | undefined; onSubmit: (data: FieldValues) => void; }'.ts(2322)
form.ts(12, 2): 'multipart' is declared here.

起初，我的类型是这样的：

type CustomFormProps<T extends any> = {
    children?: ReactNode | ReactNode[]
    setMethods?: Function
    className?: string
} & ({
    multipart: true
    onSubmit: (data: FormData) => void
} | {
    multipart: false
    onSubmit: (data: T) => void
})

然后我想，“好吧，这一定是因为当我不传递任何值时，多部分属性得到一个'未定义'”，所以我将其更改为：

type CustomFormProps<T extends any> = {
    children?: ReactNode | ReactNode[]
    setMethods?: Function
    className?: string
} & ({
    multipart: true
    onSubmit: (data: FormData) => void
} | {
    multipart: false | undefined | null | void
    onSubmit: (data: T) => void
})

但是也没有成功。我需要做什么来解决这个问题？

Answer 1

对于受歧视联盟的第二部分，您需要将

multipart

设为可选属性。

| {
  multipart?: false;
  onSubmit: (data: T) => void;
}

这是一个 codesandbox 示例，其中 Typescript 编译器正在为省略了 prop 的

onSubmit

推断

<CustomForm/>

的类型