当扩展与打字稿中的react-final-form FieldRenderProps接口时发生冲突

Question

嗨

我尝试创建自定义的react函数组件以将其传递给react-final-form字段作为组件但出现错误。

详细

表格

import Form as FinalForm, Field from 'react-final-form';
import  Form from 'semantic-ui-react';

<Form onSubmit=handleSubmit>
    <Field placeholder='Venue' value=activity.venue name='TEST FIELD' component=TestInput />
</Form>

TestInput函数组件

import React from 'react';
import FieldRenderProps from "react-final-form";

const TestInput : React.FC<FieldRenderProps<string, htmlInputElement>> = () => 
  return (
    <div>
      HI HI TEST
    </div>
  );
;

现在出现错误component=TestInput说：...类型无法分配给...实验室实验室

error message

我知道为什么会出现此问题，这是由于组件的定义所致>

component?: React.ComponentType<T> | SupportedInputs;
type ComponentType<P = > = ComponentClass<P> | FunctionComponent<P>;
type FC<P = > = FunctionComponent<P>;

// Here : T extends => HTMLElement 
export interface FieldRenderProps<FieldValue, T extends HTMLElement = HTMLElement> 
  input: FieldInputProps<FieldValue, T>;
  meta: FieldMetaState<FieldValue>;



所以为什么我不能使用HtmlInputElelemnt虽然它的防御性：

interface HTMLInputElement extends HTMLElement

现在，当我将HTMLInputElement替换为HtmlElement时，一切正常运行

const TestInput: React.FC<FieldRenderProps<string, HTMLElement>> = ( ) => 
现在我只用@ts-ignore将此行标记为忽略它！但问题出在哪里？

更新

我在CodeSandBox上测试此代码，但完全没有错误但是使用Visual Studio代码，Visual Studio和所有JetBrains IDE，该错误仍然会出现???

注意：此代码也对我有用，但仅当我使用@ ts-ignore时

嗨，我尝试创建自定义的react函数组件，以将其作为组件传递给react-final-form字段，但会出错。详细信息表单从“ react-final-form”导入Form as FinalForm，Field； ...