TypeScript构建报错：'field' is of type unknown.ts(18046) 求助

错误原因 #

遍历表单元素时，TypeScript无法自动推断field的具体类型，将其标记为unknown，导致访问field.name和field.value时触发类型检查错误。

解决方案 #

方案1：直接指定元素类型（快速解决）

在遍历的回调参数中，明确指定field为表单输入元素的联合类型：

async function sendEmail(e: React.FormEvent<HTMLFormElement>) {
  e.preventDefault();
  const formData: Record<string, string> = {};
  
  Array.from(e.currentTarget.elements).forEach((field: HTMLInputElement | HTMLTextAreaElement) => {
    if (!field.name) return;
    formData[field.name] = field.value;
  });

  await fetch('/api/email', {
    method: 'POST',
    body: JSON.stringify(formData)
  });
  
  // 直接使用当前表单重置，避免DOM查询
  e.currentTarget.reset();
}

方案2：使用类型守卫（更严谨）

编写类型守卫函数，确保元素是带有name和value的表单控件：

function isFormField(element: Element): element is HTMLInputElement | HTMLTextAreaElement {
  return 'name' in element && 'value' in element;
}

async function sendEmail(e: React.FormEvent<HTMLFormElement>) {
  e.preventDefault();
  const formData: Record<string, string> = {};
  
  Array.from(e.currentTarget.elements).forEach(field => {
    if (!isFormField(field) || !field.name) return;
    formData[field.name] = field.value;
  });

  await fetch('/api/email', {
    method: 'POST',
    body: JSON.stringify(formData)
  });
  
  e.currentTarget.reset();
}

方案3：优化事件参数类型（规范写法）

将事件参数e的类型从any改为React.FormEvent<HTMLFormElement>，同时用实例判断过滤元素：

async function sendEmail(e: React.FormEvent<HTMLFormElement>) {
  e.preventDefault();
  const form = e.currentTarget;
  const formData: Record<string, string> = {};
  
  Array.from(form.elements).forEach(field => {
    // 只处理输入框和文本域
    if (!(field instanceof HTMLInputElement || field instanceof HTMLTextAreaElement)) return;
    if (!field.name) return;
    formData[field.name] = field.value;
  });

  await fetch('/api/email', {
    method: 'POST',
    body: JSON.stringify(formData)
  });
  
  form.reset();
}

额外优化点 #

• 避免使用any类型：将e: any改为React.FormEvent<HTMLFormElement>，提升代码类型安全性。
• 替换DOM查询：直接使用e.currentTarget.reset()代替document.getElementById('emailform').onreset()，更可靠且避免类型问题。

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