TypeScript下handleChange报TypeError，如何用useState存储表单值

• 初始状态类型推导错位：原代码将useState初始值设为空数组[]，TypeScript会自动推导values的类型为never[]，和后续需要存储的对象结构完全不匹配，严格的类型校验直接触发运行时函数调用异常。
• 事件参数无类型标注：handleChange的入参e没有指定类型，TS默认将其推导为基础Event类型，无法正确识别target上的name、value输入属性，会进一步触发类型链路的运行时错误。
• 代码中混入不可见特殊字符：原代码setValues和函数调用括号之间存在不可见的零宽空格，这类字符在JS环境下会被忽略，但TS编译环节可能将其识别为函数名的组成部分，直接触发Object(...) is not a function的报错。
• 纯JS环境没有静态类型检查，会掩盖初始值结构不匹配、特殊字符的问题，切换到TS后所有约束生效，问题才会暴露。

// 定义表单值的存储结构类型
type FormValues = {
  firstName: string;
  lastName: string;
  email: string;
  phone: string;
  local_user: 'External';
}

// 初始化状态：给定匹配结构的默认值，指定useState的泛型为定义好的类型
const [values, setValues] = useState<FormValues>({
  firstName: '',
  lastName: '',
  email: '',
  phone: '',
  // 固定字段直接初始化时赋值，无需每次更新重复写入
  local_user: 'External'
});

// 标注事件参数的类型，适配input元素的change事件
function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
  // 采用函数式状态更新，避免闭包导致的旧值覆盖问题
  setValues(prev => ({
    ...prev,
    [e.target.name]: e.target.value
  }));
}

• 直接移除代码中混入的零宽特殊字符，保证函数名和调用括号之间没有不可见内容，从根源上解决函数识别报错的问题。
• 固定取值的local_user字段在初始化时直接赋值，不需要在每次输入触发的更新逻辑里重复写入，减少无意义的状态覆盖。
• 给事件参数指定React.ChangeEvent<HTMLInputElement>类型，TS可以正确解析e.target上的属性，不会触发属性访问的类型报错。
• 采用函数式更新语法替代直接展开旧的values对象，在快速连续输入的场景下也能保证状态更新的准确性。

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