title: Vue.js custom directive detecting click outside element with TypeScript
body: <p>I am trying to create a custom directive using this example: <a href="https://stackoverflow.com/a/42389266/5470563">https://stackoverflow.com/a/42389266/5470563</a></p>
  
  <p>main.ts file:</p>
  
  <pre><code>import Vue from 'vue';
  import HeaderNav from './components/HeaderNav.vue'
  
  Vue.directive('click-outside', {
      bind: function (el, binding, vnode) {
          el.clickOutsideEvent = function (event) {
              // here I check that click was outside the el and his childrens
              if (!(el == event.target || el.contains(event.target))) {
                  // and if it did, call method provided in attribute value
                  vnode.context[binding.expression](event);
              }
          };
          document.body.addEventListener('click', el.clickOutsideEvent)
      },
      unbind: function (el) {
          document.body.removeEventListener('click', el.clickOutsideEvent)
      },
  });
  
  new Vue({
      el: '#app',
          components: {
              HeaderNav
          }
  });
  </code></pre>
  
  <p>And I get a compile error:</p>
  
  <blockquote>
    <p>Property 'clickOutsideEvent' does not exist on type 'HTMLElement'.</p>
  </blockquote>
  
  <p>How do I fix it? Or is there any better solution to bind events on outside element click?</p>