Vue3中在defineProps使用InputHTMLAttributes遇编译错误求助

问题原因 #

直接在defineProps中使用InputHTMLAttributes作为泛型参数时，Vue SFC编译器无法静态解析这个复杂的内置工具类型，从而抛出"无法解析类型引用或不支持内置工具类型"的错误。另外你模板里的v-bind写法也存在语法错误。

解决方案 #

通过自定义接口继承InputHTMLAttributes，再将该接口传入defineProps，让编译器能正确解析props字段。同时修正模板中的绑定语法：

修改后的代码 #

<script lang="ts" setup>
import { type InputHTMLAttributes } from "vue";

// 自定义接口继承InputHTMLAttributes
interface InputProps extends InputHTMLAttributes {}

const props = withDefaults(
    defineProps<InputProps>(),
    {
        type: "text",
    }
);
</script>
<template>
    <div class="mb-2">
        <label for="" class="text-xs text-gray-600 capitalize font-semibold"
            >name</label
        >
        <input
            v-bind="props"
            placeholder="English"
            class="w-full text-xs py-2 px-3 outline-primary rounded-md border"
        />
    </div>
</template>

额外说明 #

如果需要添加自定义props，直接在InputProps接口中扩展即可：

interface InputProps extends InputHTMLAttributes {
  label?: string;
}

这样编译器就能正确识别所有props字段，同时保留InputHTMLAttributes的所有原生input属性支持。

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