如何在 Vue 中增加 `ElementAttrs<HTMLAttributes>` 接口？

Question

我在 TSX 中使用 Vue 3，如何扩充 ElementAttrs<HTMLAttributes> 界面，以便我可以执行以下操作而不会出现类型错误？

import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    //                                 ts complains
    return () => <div class='v-table' vLoading={true}></div>
  },
})

我得到的错误是：

Type '{ class: string; vLoading: boolean; }' is not assignable to type 'ElementAttrs<HTMLAttributes>'.

Property 'vLoading' does not exist on type 'ElementAttrs<HTMLAttributes>'.ts(2322)

Answer 1

我已经弄明白了：

// Import an entire module for side effects only, without importing anything.
// This runs the module's global code but doesn't actually import any values.
import 'vue'

declare module 'vue' {
  interface HTMLAttributes {
    vLoading?: unknown
  }
}