Vue使用aria-hidden、data-dismiss属性报ariaHidden不存在错误

问题现象 #

在Vue文件中编写带aria-hidden属性的代码时触发TS类型报错，使用data-dismiss属性时出现同类错误，疑惑aria-hidden属性是否需要额外配置才能使用。

复现代码 #

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
</button>

报错信息 #

Type '{ ariaHidden: string; "aria-hidden": "true"; }' is not assignable to type 'ElementAttrs<HTMLAttributes>'.
  Property 'ariaHidden' does not exist on type 'ElementAttrs<HTMLAttributes>'. Did you mean ''aria-hidden''?

原因与解决方法 #

aria-hidden是原生HTML支持的标准无障碍属性，不需要在Vue中做任何额外配置、全局注册即可正常使用，该报错是TypeScript类型校验识别异常导致的，和属性本身的使用方式无关，根据代码编写场景选择对应解决方法即可：

• 若你是在TSX/JSX文件中编写该代码
  Vue JSX语法会自动将带连字符的属性转换为小驼峰格式做类型校验，部分旧版本Vue的TS类型定义未收录全量aria、data-*类属性的小驼峰类型，就会触发该报错：
  • 方案1：将属性改为小驼峰格式传值，aria-hidden对应ariaHidden，直接传布尔值而非字符串，data-dismiss对应dataDismiss，修改后写法：

    <button type="button" class="close" dataDismiss="alert" aria-label="Close">
        <span ariaHidden={true}>&times;</span>
    </button>
    

  • 方案2：不想修改写法的话，在对应代码行上方加// @ts-ignore注释跳过该行类型校验即可，不影响代码实际运行效果。
• 若你是在.vue文件的<template>标签中编写该代码
  这类报错基本是项目Vue依赖版本、编辑器Vue类型插件版本过旧，类型定义文件未正确识别原生HTML的标准属性导致：
  • 方案1：将项目内vue依赖更新到对应大版本的最新稳定版，同时更新编辑器内的Volar（Vue语言服务）插件，重启编辑器后类型校验即可恢复正常。
  • 方案2：临时修复可以在项目全局TS声明文件（通常为env.d.ts）中添加类型扩展，补全缺失的属性定义：

    declare module '@vue/runtime-dom' {
      interface HTMLAttributes {
        ariaHidden?: boolean | string
        dataDismiss?: string
      }
    }
    export {}
    

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