Reactjs 此React form field hook的正确类型是什么？

我有一个React钩子（使用typescript），但只有在使用

any

作为初始值的类型时，我才能让它工作

我尝试了

HTMLInputElement

，

React.FormEvent

（甚至

React.FormEvent

）的组合，以及使用

input type=“text”

尝试将输入元素限制为

type:string。

这是钩子：

import { useCallback, useState } from "react";

export default function useField(initialValue: any) {
  const [value, setValue] = useState(initialValue);

  const handleUpdate = useCallback(
    ({ currentTarget: { type, checked, value } }) => {
      setValue(type === "checkbox" ? checked : value);
    },
    []
  );

  return [value, handleUpdate];
}

这就是它被使用的地方：

import useField from "./hooks/useField";

const App = () => {
  const [firstName, setFirstName] = useField("");
  const [lastName, setLastName] = useField("");
  const [age, setAge] = useField("");

  return (
    <div className="App">
      <form>
        <input value={firstName} name="firstName" onChange={setFirstName} />
        <input value={lastName} name="lastName" onChange={setLastName} />
        <input value={age} name="age" onChange={setAge} />
      </form>
    </div>
  );
};

export default App;

第二个是关于input onChange事件：

(JSX attribute) React.InputHTMLAttributes<HTMLInputElement>.onChange?: ((event: React.ChangeEvent<HTMLInputElement>) => void) | undefined
Type 'string | (({ currentTarget: { type, checked, value } }: any) => void)' is not assignable to type '((event: ChangeEvent<HTMLInputElement>) => void) | undefined'.
  Type 'string' is not assignable to type '((event: ChangeEvent<HTMLInputElement>) => void) | undefined'.ts(2322)
index.d.ts(1977, 9): The expected type comes from property 'onChange' which is declared here on type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'

（JSX属性）React.inputtmLattributes.onChange:（（事件：React.ChangeEvent）=>void）|未定义
类型“string |”（{currentTarget:{Type，checked，value}}}:any）=>void）不可分配给类型“（（event:ChangeEvent）=>void）|未定义”。
类型“string”不可分配给类型“（（事件：ChangeEvent）=>void）|未定义”。ts（2322）
index.d.ts（1977，9）：预期的类型来自属性“onChange”，该属性在类型“DetailedHTMLProps”上声明

---

今天是我使用Typescript的第一天，所以这可能是非常明显的事情

如果不指定返回类型，TypeScript将推断它。我将从一个简单的例子开始：

function strNum() {
  return [1, 'a'];
}

这将返回类型

（string | number）[

，即可以包含字符串或数字元素的数组

useField

返回

string |（事件：ChangeEvent）=>void的数组

。这意味着数组的任何元素都可以是这两种类型中的任何一种，并且它们彼此不兼容

相反，您可以将返回类型指定为元组。这是具有特定元素类型的集合长度数组

useField(initialValue: string): [string, (event: React.ChangeEvent<HTMLInputElement>) => void] {

useField（initialValue:string）：[string，（事件：React.ChangeEvent）=>void]{

useField(initialValue: string): [string, (event: React.ChangeEvent<HTMLInputElement>) => void] {