属性 'dataToggle' 在类型'ElementAttrs<AnchorHTMLAttributes>' vue3 和 typescript 上不存在答案

【问题标题】：Property 'dataToggle' does not exist on type 'ElementAttrs<AnchorHTMLAttributes>' vue3 and typescript属性 'dataToggle' 在类型'ElementAttrs<AnchorHTMLAttributes>' vue3 和 typescript 上不存在
【发布时间】：2022-06-22 14:46:11
【问题描述】：

问题

我正在尝试使用 bootstrap4 sn-p 在我的 vue 3 应用程序中创建导航栏菜单 -

      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
          aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>

但是，我从编译器收到以下错误 -

类型'{类：字符串； href：字符串； id：字符串；角色：字符串；数据切换：字符串； “数据切换”：字符串； ariaHaspopup：字符串； “aria-haspopup”：“真”； ariaExpanded：字符串； “咏叹调扩展”： “错误的”; }' 不可分配给类型 '元素属性'。属性“dataToggle”不存在于类型 'ElementAttrs'.ts(2322)

因此下拉菜单不起作用...这是为什么呢？

编辑 shims-vue.d.ts 文件 -

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

【问题讨论】：

你是如何创建你的项目的？
使用 vue cli
你有shims-vue.d.ts文件吗？
我确实......

标签： typescript vue.js bootstrap-4 vuejs3

【解决方案1】：

尝试在shims-vue.d.ts中添加如下声明

declare module "@vue/runtime-dom" {
  interface bootstrapAttrs extends HTMLAttributes {
    datatToggle?: string
  }
}
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

【讨论】：

谢谢，但这并没有什么不同。我添加了我的 shims-vue.d.ts 文件以供参考
你重启编辑器了吗？
啊！重新启动似乎已经解决了这个问题。但是，它给我的反应式导入带来了问题 - “TS2305: Module '"../../node_modules/vue/dist/vue"' has no export member 'reactive'.”
尝试将该声明添加到shims-vue.d.ts 旁边的另一个文件中并命名为bs.d.ts
感谢您的支持。按照建议创建一个新文件后，我得到了同样的错误，但是对于“计算”而不是......模块'“vue”'没有导出成员'computed'.ts（2305）

【解决方案2】：

使用内容创建新的bs.d.ts

import "vue";

declare module "vue" {
  interface HTMLAttributes {
    dataToggle?: string;
  }
}

并将其“包含”在您的 tsconfig.json 中。

原答案：How to augment `ElementAttrs<HTMLAttributes>` interface in Vue?

【讨论】：