如何在Vue中扩展HTMLAttributes接口使其在模板中生效？

正确的类型扩展方式 #

你用的是普通Vue SFC模板而非TSX，所以之前针对ElementAttrs的扩展不会生效，需要扩展的是HTMLAttributes接口，具体操作：

1. 在项目src目录下创建类型声明文件，比如src/types/vue.d.ts
2. 写入以下代码：

import '@vue/runtime-dom'

declare module '@vue/runtime-dom' {
  interface HTMLAttributes {
    'data-testid'?: string
  }
}

export {}

关键注意事项 #

• 确保TypeScript识别该文件：检查tsconfig.json的include字段，要包含声明文件所在目录，示例配置：

  {
    "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"]
  }
  

• 无需扩展ElementAttrs：这个接口仅服务于Vue的TSX语法，普通模板不会调用它
• 重启类型检查服务：修改类型声明后，重启vue-tsc或IDE的TypeScript服务，确保新类型加载生效

验证 #

在SFC模板中直接使用属性：

<template>
  <button data-testid="submit-btn">提交</button>
</template>

运行vue-tsc --noEmit后，不会再出现data-testid属性不存在的报错。

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