Vue Typescript EmailJS项目报错：unknown类型无法赋值给指定类型

问题原因 #

TypeScript无法推断this.$refs.form的具体类型，默认将其视为unknown，而emailjs.sendForm要求第三个参数是string | HTMLFormElement，类型不匹配导致报错。

解决方案 #

方案1：类型断言+空值检查 #

调用sendForm前，先断言this.$refs.form为HTMLFormElement，同时添加空值判断避免组件未挂载时的报错：

sendEmail() {
  const form = this.$refs.form as HTMLFormElement | null;
  if (!form) return;
  
  emailjs
    .sendForm('service_wu6mj7b', 'template_hxo8y4h', form, 'wdqa23HmG2helkMuFGDY0')
    .then(
      (result) => {
        console.log('SUCCESS!', result.text)
      },
      (error) => {
        console.log('FAILED...', error.text)
      }
    )
}

方案2：显式声明$refs类型 #

在组件中明确指定$refs的类型，让TypeScript提前识别form的类型：

import emailjs from '@emailjs/browser'

export default {
  // 声明$refs的类型
  $refs: {
    form: HTMLFormElement
  },
  methods: {
    sendEmail() {
      emailjs
        .sendForm('service_wu6mj7b', 'template_hxo8y4h', this.$refs.form, 'wdqa23HmG2helkMuFGDY0')
        .then(
          (result) => {
            console.log('SUCCESS!', result.text)
          },
          (error) => {
            console.log('FAILED...', error.text)
          }
        )
    }
  }
}

方案3：通过事件参数直接获取表单元素 #

绕开$refs，直接从submit事件中获取表单元素，更符合Vue响应式逻辑：
模板修改：

<form @submit.prevent="sendEmail($event.target)">

脚本修改：

sendEmail(form: HTMLFormElement) {
  emailjs
    .sendForm('service_wu6mj7b', 'template_hxo8y4h', form, 'wdqa23HmG2helkMuFGDY0')
    .then(
      (result) => {
        console.log('SUCCESS!', result.text)
      },
      (error) => {
        console.log('FAILED...', error.text)
      }
    )
}

补充提示 #

• 优先推荐方案3，既规避了$refs的类型问题，也避免了组件未挂载时$refs.form为空的风险。
• 方案1和2中，空值检查是必要的，防止组件渲染完成前调用sendEmail导致的报错。

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