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

问题描述

我正在从vue类型导入DirectiveOptions。

DirectiveFunction类型的功能很少。

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

如何为这种HTMLElement类型添加属性？

Here is code sandbox where the error occurs

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,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'中必需

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）