Vue3组件使用$attrs时Volar报TypeScript类型错误如何解决

自定义BaseInput组件通过v-bind="$attrs"透传原生input属性时，传入type属性会被Volar抛出TypeScript类型校验错误，报错原文翻译如下：

类型“{ modelValue: any; type: string; label: string; class: string; }”无法赋值给类型“IntrinsicAttributes & Partial<{ modelValue: string | number; label: string; vMessage: unknown[]; }>”

错误原因 #

Volar对组件做类型校验时，默认仅识别组件props选项中显式声明的属性。虽然代码中设置了inheritAttrs: false并通过$attrs透传属性，但TypeScript类型层面没有声明组件支持接收原生input的合法属性，因此传入type这类原生属性时会触发类型不匹配报错。

方案1：保留现有选项式API写法 #

仅需在组件配置中新增attrs类型声明，引入Vue内置的原生input属性类型即可，修改后的<script>部分代码如下：

import { defineComponent, type InputHTMLAttributes } from 'vue'

// 提前提取props配置，用于排除和原生属性重名的项，避免类型冲突
const propsConfig = {
  label: {
    type: String,
    default: ''
  },
  modelValue: {
    type: [String, Number],
    default: ''
  },
  vMessage: {
    type: Array,
    default: []
  }
} as const

export default defineComponent({
  inheritAttrs: false,
  // 声明attrs支持所有原生input属性，排除已在props中定义的重名属性
  attrs: Object as () => Omit<InputHTMLAttributes, keyof typeof propsConfig>,
  props: propsConfig,
  setup() {
    const handleInputChange = (event: Event) => (event.target as HTMLInputElement).value
    return { handleInputChange }
  }
})

修改完成后，传入type、placeholder、disabled等所有原生input合法属性都不会再报类型错误。

方案2：改用<script setup>语法（推荐） #

<script setup>对$attrs的类型推导支持更友好，不需要手动声明attrs类型，仅需通过defineOptions配置inheritAttrs即可，完整组件代码：

<template>
  <label class="label">{{ label }}</label>
  <input
    v-bind="$attrs"
    class="input"
    :value="modelValue"
    @input="$emit('update:modelValue', handleInputChange($event))"
  >
  <span class="v" v-if="vMessage.length > 0">
    <span class="v--error">{{ vMessage[0] }}</span>
  </span>
</template>

<script setup lang="ts">
import { defineOptions, defineProps, defineEmits } from 'vue'

defineOptions({
  inheritAttrs: false
})

defineProps({
  label: {
    type: String,
    default: ''
  },
  modelValue: {
    type: [String, Number],
    default: ''
  },
  vMessage: {
    type: Array as () => string[],
    default: () => []
  }
})

defineEmits<{
  'update:modelValue': [value: string | number]
}>()

const handleInputChange = (event: Event) => (event.target as HTMLInputElement).value
</script>

• 不要通过// @ts-ignore、as any这类暴力方式绕过类型校验，会丢失所有组件属性的类型提示，后续传入非法属性时无法被TS提前识别。
• 如果组件是对其他原生元素（比如select、textarea）的封装，只需要把InputHTMLAttributes替换为对应元素的类型即可，比如SelectHTMLAttributes、TextareaHTMLAttributes。

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