如何解决TypeScript React自定义Hook useForm报Expected 0 type arguments错误

• 你编写的useForm未声明泛型参数，因此调用时传入泛型<valuesInterface>会触发TS2558: Expected 0 type arguments, but got 1报错
• 原useForm的返回值未指定元组类型，TS默认会将其推导为(表单值类型 | 变更函数类型)[]联合类型数组，解构后无法给values和handleChange分配正确类型
• 事件参数用any定义不符合类型规范，存在类型隐患

1. 改写useForm为泛型Hook #

import { useState, ChangeEvent } from 'react';

// 泛型T继承对象类型，可适配任意结构的表单值
export const useForm = <T extends Record<string, any>>(initialValue: T) => {
    const [values, setValues] = useState<T>(initialValue);

    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
        const { name, value } = e.target;
        setValues({
            ...values,
            [name]: value
        });
    };

    // as const声明返回值为固定顺序的元组，避免TS推导为联合类型数组
    return [values, handleChange] as const;
};

2. 调整App组件调用逻辑 #

你原本定义的ValuesInterface结构完全正确，调用时泛型参数可显式传入，也可以省略让TS根据初始值自动推导：

import { useForm } from './utils/useForm';
import './App.css';

interface ValuesInterface {
    email: string,
    password: string
}

const App = () => {
  // 写法1：显式传入泛型参数
  const [values, handleChange] = useForm<ValuesInterface>({email: '', password: ''});
  // 写法2：省略泛型，TS自动推导类型
  // const [values, handleChange] = useForm({email: '', password: ''});

  return (
    <div className="App">
      <input name='email' value={values.email} onChange={handleChange}/>
      <input type='password' name='password' value={values.password} onChange={handleChange} />
    </div>
  );
}

export default App;

修正后即可解决编译报错，同时泛型版的useForm支持任意结构的表单，复用性更强，类型定义完全符合TS开发规范。

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