Vue 3 directive with Typescript - focusChangeNotify

focusChangeNotify.ts

import { DirectiveBinding, ObjectDirective } from 'vue'

type FocusableElement = HTMLInputElement | HTMLTextAreaElement
type NotificationCallback = (isNowFocused: boolean) => void
type GenericEventHandler = () => void
interface ExtendedDirective extends ObjectDirective {
  handleFocus: GenericEventHandler
  handleBlur: GenericEventHandler
}

const focusChangeNotify = {
  handleFocus: (() => {}) as GenericEventHandler,
  handleBlur: (() => {}) as GenericEventHandler,
  mounted(element: FocusableElement, binding: DirectiveBinding) {
    const callback = (binding.value as NotificationCallback)
    const thisDirective = binding.dir as ExtendedDirective
    thisDirective.handleFocus = () => { callback(true) }
    thisDirective.handleBlur = () => { callback(false) }
    element.addEventListener('focus', thisDirective.handleFocus)
    element.addEventListener('blur', thisDirective.handleBlur)
  },
  beforeUnmount(element: FocusableElement, binding: DirectiveBinding) {
    const thisDirective = binding.dir as ExtendedDirective
    element.removeEventListener('focus', thisDirective.handleFocus)
    element.removeEventListener('blur', thisDirective.handleBlur)
  }
}

export default focusChangeNotify

From the above eslint complains about.
Unsafe argument of type any assigned to a parameter of type () => void

el.additionalData.timeout = setTimeout(binding.value, delay);

Casting it seemed to make it happy.

el.additionalData.timeout = setTimeout(binding.value as () => void, delay);

Or perhaps better

const pointerdownEvent = (el: ExtendedHTMLElement, binding: DirectiveBinding<CallbackType>) => {
  const delay = binding.arg ? parseInt(binding.arg) : 500;
  el.additionalData.timeout = setTimeout(binding.value, delay);
};