typescript - Skrive typede egendefinerte direktiver

Jeg vil gjerne stille et spørsmål om Vues tilpassede direktiver. Som en fan av Typescript ønsker jeg å bruke denne funksjonen med type-støtte, men jeg kunne ikke finne noen løsninger verken på nettet eller i chatten.

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

Når jeg skriver koden min slik, og legger til clickOutside-direktivet i Vue, fungerer det uten problemer. Likevel har clickOutside ingen typesupport, ingen autfullføringsstøtte, og det blir gjenkjent som any.

For å definere, fulgte jeg dokumentasjonen til Vue.

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

Svar #1

Dette er mulig ved å bruke Directive<T,V>-typen selv om den er dårlig dokumentert.

import { Directive } from 'vue'

Typen tar to typeargumenter, ett for elementtypen T og ett for bindingsverdien V. Bruk det slik:

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

Svar #2

Å skrive egendefinerte globale direktiver støttes foreløpig ikke, men det finnes en åpen pull request for å legge til støtte for det.

Relaterte artikler