Vue 3 + TypeScript中如何正确为HTML属性定义类型？

核心问题在于useAttrs()默认返回Record<string, unknown>类型，导致attrs.id被推断为unknown，触发类型错误。以下是两种优雅的解决方式：

方法1：指定所需的具体属性类型 #

如果组件只需要接收id这一个HTML属性，直接给useAttrs()做精准的类型断言：

<template>
    <label for="$attrs.id">{{ label }}</label>
    <input type="checkbox" :id="$attrs.id" />
</template>
<script setup lang="ts">
import { useAttrs } from 'vue'
import { useField } from 'vee-validate'

const props = defineProps<{
    fieldName: string,
    rules: string,
    label: string
}>()

// 断言attrs包含可选的id属性
const attrs = useAttrs() as { id?: string }

// attrs.id为string | undefined，与props.fieldName结合后类型为string，符合useField要求
useField(attrs.id || props.fieldName, props.rules)
</script>

方法2：使用Vue内置的HTML属性类型 #

如果组件需要接收通用HTML元素属性（比如class、style、id等），可以使用Vue提供的HTMLAttributes类型，覆盖所有通用HTML属性的类型定义：

<template>
    <label for="$attrs.id">{{ label }}</label>
    <input type="checkbox" :id="$attrs.id" />
</template>
<script setup lang="ts">
import { useAttrs } from 'vue'
import type { HTMLAttributes } from 'vue'
import { useField } from 'vee-validate'

const props = defineProps<{
    fieldName: string,
    rules: string,
    label: string
}>()

// 断言attrs为通用HTML属性类型
const attrs = useAttrs() as HTMLAttributes

useField(attrs.id || props.fieldName, props.rules)
</script>

进阶：针对特定HTML元素的属性类型 #

如果组件是基于特定HTML元素（比如<input>）开发的，可以使用更精准的类型，比如InputHTMLAttributes，它包含了input元素特有的属性（如type、value等）：

import type { InputHTMLAttributes } from 'vue'
const attrs = useAttrs() as InputHTMLAttributes

这些方式无需强制转换字符串或冗余的ref包裹，直接通过类型断言让TypeScript正确识别$attrs的属性类型，既符合类型检查要求，又保持代码简洁。

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