React中传递类型化值时丢失上下文的TypeScript问题

嘿，我完全懂你现在的处境——用any确实能快速让TS闭嘴，但这等于放弃了TypeScript最核心的类型保障能力，实在得不偿失。咱们来把这个问题彻底解决，让你的代码既符合TS规范又能正常运行。

首先，你需要为表单组件接收的props定义一个类型接口，这样TS就能准确知道每个属性的类型了。这里分两种常见情况：

情况1：自己手写表单逻辑（无第三方库） #

先创建一个描述表单props的接口，把每个属性的类型都明确下来：

import React from 'react';

interface FormProps {
  // 表单提交事件，参数是表单的Event对象
  handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
  // 输入框变化事件，兼容多种表单元素
  handleChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void;
  // 输入框失焦事件
  handleBlur: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void;
  // 表单值对象，键是字段名，值支持常用的表单数据类型
  values: Record<string, string | number | boolean>;
  // 错误信息对象，键是字段名，值是错误提示文本
  errors: Record<string, string>;
}

然后在你的表单组件里，给解构的props加上这个类型：

const Form = ({ handleSubmit, handleChange, handleBlur, values, errors }: FormProps) => {
  // 你的表单组件逻辑
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="username"
        value={values.username}
        onChange={handleChange}
        onBlur={handleBlur}
      />
      {errors.username && <span className="error-text">{errors.username}</span>}
      {/* 其他表单元素 */}
      <button type="submit">提交</button>
    </form>
  );
};

情况2：使用Formik等表单库 #

如果你是用Formik这类流行的表单库，其实不用自己写接口——直接用库提供的FormikProps类型就行，还能结合你自己的表单值类型：

import React from 'react';
import { FormikProps } from 'formik';

// 先定义你的表单字段具体类型
interface MyFormValues {
  username: string;
  email: string;
  password: string;
}

// 直接用FormikProps包裹你的表单值类型
const Form = ({ handleSubmit, handleChange, handleBlur, values, errors }: FormikProps<MyFormValues>) => {
  // 组件逻辑...
};

这样做的好处太多了：

• TS会帮你检查每个props的拼写（比如把handleSubmit写成handleSubmi会立刻报错）
• 访问values或errors里的字段时，TS会提示你可用的字段名
• 团队协作时，别人一看接口就知道这个组件需要哪些props，可读性拉满

再也不用依赖any这种“万能钥匙”啦！

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