CODEWITHSUNDEEP
typescriptvue.jsvue-directives
Rago
Rago

Reputation: 436

Typing Custom Directives

I would like to ask a question about Vue's custom directives. As a fan of Typescript, I want to use this feature with type support, yet I could not find any solutions neither on the web nor on the chat.

<button v-clickOutside="myFunc"> Click Outside </button>

When I write my code like this, and add clickOutside directive to Vue, it works without any problem. Yet the clickOutside has no type support, no auto-complete support and it is recognized as any.

To define, I followed the documentation of Vue.

app.directive('clickOutside', (el, binding) => {
  // My code is here.
})

Upvotes: 6

Views: 7787

Answers (3)

morteza mortezaie
morteza mortezaie

Reputation: 1564

You can import DirectiveBinding and also VNode types from Vue

import {  DirectiveBinding , VNode } from 'vue';

const vClickOutside = {

  mounted:(el:HTMLElement, binding:DirectiveBinding, vnode:VNode){
     // do something
  }

}

Upvotes: 3

Jonas M&#230;rsk
Jonas M&#230;rsk

Reputation: 285

This is possible using the Directive<T,V> type even though its poorly documented.

import { Directive } from 'vue'

The type takes two type arguments, one for the element type T and one for the binding value V. Use it like this:

app.directive<HTMLElement, string>('clickOutside', {
  mounted (el, { value }) {
    // el:  HTMLElement
    // value: string
  }
})

Upvotes: 9

tony19
tony19

Reputation: 138276

Typing custom global directives is currently not yet supported, but there's an open Pull Request to add support for it.

Upvotes: 7

Related Questions