Typescript`可以用约束'{}'的不同子类型和react-final-form实例化

Question

我创建了一个可重现的example。
我的问题是：如何使用react-final-form 修复此打字稿错误？
错误是：

Type '{ name: string; onBlur: (event?: FocusEvent<HTMLElement>) => void; onChange: (event: any) => void; onFocus: (event?: FocusEvent<HTMLElement>) => void; type?: string; value: T; checked?: boolean; multiple?: boolean; }' is not assignable to type 'T'.
  '{ name: string; onBlur: (event?: FocusEvent<HTMLElement>) => void; onChange: (event: any) => void; onFocus: (event?: FocusEvent<HTMLElement>) => void; type?: string; value: T; checked?: boolean; multiple?: boolean; }' is assignable to the constraint of type 'T', 
but 'T' could be instantiated with a different subtype of constraint '{}'.

点击上面的链接即可轻松查看。
我看到this 很好的答案，但我不知道如何将它应用到这个案例中。

Answer 1

似乎在抱怨 ComponentType 不一定具有您尝试应用于 Component 对象的 FieldRenderProps 的属性。您需要编写类型，以便它了解您的组件将始终具有这些属性。

import React, { ComponentType, FC } from 'react';
import { FieldRenderProps, FieldInputProps } from 'react-final-form'

type ComponentBaseProps<T> = FieldInputProps<T> & Record<string, any>

const createAdapter = <T, >(Component: ComponentType<ComponentBaseProps<T>>) => {
  return ({ input, meta, ...rest }: FieldRenderProps<T>): JSX.Element => {
    return <Component {...input} {...rest} />
  }
}

上述类型将通知 typescript 您提供的组件具有您尝试分配的所有属性，构成您的所有属性：

• 输入变量（FieldInputProps 类型）
• rest 变量（Record 类型）

另外需要注意的是，ComponentType 的通用参数是应用于组件的完整属性集，而 FieldRenderProps 的通用参数是表单数据的类型。对两者都直接使用 T 是导致您不匹配的原因。