title: HTMLElementWrapper solution for extending prototype -- adding new functions
body: <p>The problem is quite simple:</p>
  <p>add two functions to the <code>HTMLElement</code> which is <code>on</code> and <code>off</code>.</p>
  <p>The <code>on</code> functions works exact same as <code>addEventListener</code></p>
  <p>The <code>off</code> functions works exact same as <code>removeEventListener</code>.</p>
  <p>One quick solutions is:</p>
  <pre><code>HTMLElement.prototype[&quot;on&quot;] = HTMLElement.prototype.addEventListener;
  HTMLElement.prototype[&quot;off&quot;] = HTMLElement.prototype.removeEventListener;
  </code></pre>
  <p>this works fine but since I am using typescript I will get a error in vscode saying:</p>
  <pre><code>Property 'on' does not exist on type 'HTMLElement'
  </code></pre>
  <p>I do not know how to solve this error in vscode but it works fine anyway.</p>
  <p>Then I tried another way to create a wrapper class as below:</p>
  <pre><code>export class HTMLElementWrapper {
      dom: HTMLElement;
      constructor(dom) {
          this.dom = dom;
      }
  
      on(...args) {
          HTMLElement.prototype.addEventListener.call(this.dom, arguments);
      }
  
      off(...args) {
          HTMLElement.prototype.removeEventListener.call(this.dom, arguments);
      }
  }
  </code></pre>
  <p>If I do this I will not get the error in vscode again but when I wrong the code I will get the error in runtime:</p>
  <pre><code>TypeError: Failed to execute 'addEventListener' on 'EventTarget': 
  2 arguments required, but only 1 present.
  </code></pre>
  <p>I am not sure how to solve this.</p>
  <p>Any suggestion will be appreciated, thanks.</p>