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

Question

问题

我正试图使用bootstrap4片段在我的vue3应用程序-中创建导航栏菜单

<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>

然而，我从编译器得到了以下错误-

Type'｛class:string；href:string、id:string和role:string；dataToggle:string"数据切换"：一串ariaHaspopup：字符串；"aria haspopup"："true"；；ariaExpanded:string"aria expanded"："false"；｝"不可分配给类型"ElementAttrs"。属性"dataToggle"不存在于类型"ElementAttrs"上。ts(2322)

因此，下拉菜单无法工作。。。为什么会这样？

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

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

Answer 1

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

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

并将其转换为"；包括"；在您的tsconfig.json中。

---

原始答案：如何增强`ElementAttrs<HTML属性>`Vue中的接口？