React+final-form场景下TypeScript类型推导问题咨询

问题原因 #

1. 你定义的Props接口已经固定了field的类型为FieldRenderProps<string, HTMLInputElement>，此处泛型T已经被具体指定为HTMLInputElement，不是未确定的泛型变量。
2. React内置的FocusEvent类型本身包含两个泛型参数，定义结构为：

   React.FocusEvent<Target = Element, CurrentTarget = Element>
   

   • 第一个泛型Target是事件触发的原始目标元素类型
   • 第二个泛型CurrentTarget是事件冒泡到的当前绑定事件的元素类型，默认值为Element
3. 你在定义FieldInputProps的onFocus、onBlur属性时，仅给FocusEvent传入了第一个泛型参数T，第二个参数使用了默认的Element，因此onFocus的完整类型本身就是(event?: React.FocusEvent<T, Element>) => void。你看到的类型结果和解构操作没有关联，TS只是在展示类型的时候把完整的泛型参数都显示出来了，不存在类型计算错误的问题。

调整方案 #

如果你希望CurrentTarget也和目标元素类型保持一致，只需要修改FieldInputProps里的onBlur、onFocus的类型定义，显式传入第二个泛型参数即可：

interface FieldInputProps<FieldValue, T extends HTMLElement> {
  name: string;
  // 修改onBlur的泛型传入
  onBlur: (event?: React.FocusEvent<T, T>) => void;
  onChange: (event: React.ChangeEvent<T> | any) => void;
  // 修改onFocus的泛型传入
  onFocus: (event?: React.FocusEvent<T, T>) => void;
  type?: string;
  value: FieldValue;
  checked?: boolean;
  multiple?: boolean;
}

调整后onFocus的类型就会变成(event?: React.FocusEvent<HTMLInputElement, HTMLInputElement>) => void，和你的预期一致。

内容的提问来源于stack exchange，提问作者pom421