如何用React表单数据填充符合TypeScript接口的对象？

错误原因解析 #

错误1：The left-hand side of an 'instanceof' expression must be of type 'any', an object type or a type parameter. #

instanceof是用来判断对象实例是否属于某个构造函数/类的，你这里的key是字符串类型，完全不适用这个语法。而且你想用它判断键是否属于QuizStructure，逻辑本身就不成立。

错误2：'QuizStructure' only refers to a type, but is being used as a value here. #

TypeScript的接口是编译时类型，编译后会被彻底移除，不存在对应的运行时变量。你把QuizStructure当作值来用（比如instanceof QuizStructure），运行时根本找不到这个东西，所以报错。

解决思路 #

要实现「仅初始化符合接口schema的键值对」，核心是要在运行时能拿到接口的合法键列表——因为接口本身在运行时不存在，所以需要手动创建一个对应的键数组，用来做合法性校验：

1. 定义一个运行时存在的数组，包含QuizStructure的所有键
2. 遍历FormData时，检查当前key是否在这个数组里，只处理合法键
3. 针对age字段单独做数字类型转换，其他字段直接赋值

修正后的代码 #

interface QuizStructure{
  name: string,
  age: number,
  hobbies: string,
  Backend: string,
  preferredLanguage: string,
  API: string,
  OAuth: string
}

// 定义运行时可用的合法键数组，和接口字段一一对应
const QUIZ_VALID_KEYS = ['name', 'age', 'hobbies', 'Backend', 'preferredLanguage', 'API', 'OAuth'] as const;
// 基于数组生成类型，确保键的类型和接口严格一致（可选，增强类型检查）
type QuizKey = typeof QUIZ_VALID_KEYS[number];

type FormElem = React.FormEvent<HTMLFormElement>;

function App(): JSX.Element {
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>): void => {
    e.preventDefault(); // 必须阻止表单默认提交行为，否则页面会刷新
    const formData = new FormData(e.currentTarget);

    const obj: QuizStructure = {
      name: '',
      age: 0,
      hobbies: '',
      Backend: '',
      preferredLanguage: '',
      API: '',
      OAuth: ''
    };

    for (const [key, value] of formData.entries()) {
      // 检查当前key是否是接口的合法字段
      if (QUIZ_VALID_KEYS.includes(key as QuizKey)) {
        if (key === 'age') {
          // 转换为数字，同时处理非数字输入的情况（可选，可根据需求调整）
          obj[key as keyof QuizStructure] = Number(value) || 0;
        } else {
          obj[key as keyof QuizStructure] = value as string;
        }
      }
    }

    console.log(obj);
  };

  // 补充完整的表单JSX（原代码缺失这部分）
  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" placeholder="姓名" />
      <input type="number" name="age" placeholder="年龄" />
      <input type="text" name="hobbies" placeholder="爱好" />
      <input type="text" name="Backend" placeholder="后端技术栈" />
      <input type="text" name="preferredLanguage" placeholder="偏好语言" />
      <input type="text" name="API" placeholder="熟悉的API" />
      <input type="text" name="OAuth" placeholder="OAuth经验" />
      <button type="submit">提交</button>
    </form>
  );
}

关键说明 #

• QUIZ_VALID_KEYS是运行时真实存在的数组，用来替代接口做键的合法性校验，解决了接口无法在运行时访问的问题
• 使用key as keyof QuizStructure做类型断言，告诉TypeScript当前key是接口的合法键，避免类型报错
• 新增e.preventDefault()，这是React表单处理的必要操作，防止页面刷新导致数据丢失
• 对age的转换增加了|| 0，可以处理用户输入非数字的异常情况，可根据业务需求调整逻辑

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