javascript - 如何在导入的接口内向已声明函数的参数类型添加属性？TS2322

Question

我正在从类型中导入DirectiveOptions 。vue

DirectiveFunction类型的功能很少。

这个DirectiveFunction的第一个参数是HTMLElement。但是我不导入这个函数类型，我需要扩展或添加属性到这个函数的第一个参数。

如何向此HTMLElement类型添加属性？

这是发生错误的代码沙箱

import { DirectiveOptions } from 'vue'

interface HTMLElement {
    doStuff: (event: any) => void
}

const directive: DirectiveOptions = {
    bind(elem: HTMLElement, bind, vn){
        elem.doStuff = (event)=> {
            console.log('doing stuff')
        }
        document.body.addEventListener('click', elem.doStuff )
    },
    unbind(elem){
        document.body.removeEventListener('click', elem.doStuff)
    }
}

编译器说“HTMLElement”类型中缺少属性“doStuff”，但在“HTMLElement”类型中是必需的，因为 HTMLElement 已经在 DirectiveOptions 函数参数中声明。

即使我遵循答案并创建扩展HTMLElement相同错误的新界面也会发生。

interface HTMLElementWithDoStuff extends HTMLElement {
  doStuff: (event: any) => void;
}

const directive: DirectiveOptions = {
  bind(elem: HTMLElementWithDoStuff, bind, vn) {
    elem.doStuff = (event) => {
      console.log("doing stuff");
    };
    document.body.addEventListener("click", elem.doStuff);
  },
  unbind(elem: HTMLElementWithDoStuff) {
    document.body.removeEventListener("click", elem.doStuff);
  }
};

“HTMLElement”类型中缺少属性“doStuff”，但在“HTMLElementWithDoStuff”类型中是必需的

标签： javascripttypescriptvue.jsvue-directives

Answer 1

更改现有类型通常是个坏主意，尤其是来自应用程序外部位置的类型。

您应该创建自己的类型extends HTMLElement，将您的属性添加到其中，然后使用该新类型。

interface HTMLElementWithDoStuff extends HTMLElement {
  doStuff: (event: any) => void;
}

然后在需要该方法存在的文件中使用该类型。

const directive: DirectiveOptions = {
  bind(elem: HTMLElementWithDoStuff, bind, vn) {
    elem.doStuff = (event) => {
      console.log("doing stuff");
    };
    document.body.addEventListener("click", elem.doStuff);
  },
  unbind(elem: HTMLElementWithDoStuff) {
    document.body.removeEventListener("click", elem.doStuff);
  }
};

现在打字稿将强制任何HTMLElement传入的内容也将有一个doStuff方法。

更新沙盒