关于Vue自定义指令在TypeScript环境下的类型支持问题咨询

我正好遇到过类似的困扰，给你一套完整的方案来让v-clickOutside指令获得类型提示和自动补全，彻底摆脱any类型的尴尬：

1. 扩展Vue全局指令类型 #

首先需要给Vue的全局指令系统添加我们自定义指令的类型定义。在项目中创建一个类型声明文件（比如src/types/vue.d.ts），内容如下：

import type { DirectiveBinding } from 'vue'

// 定义指令绑定值的类型：这里是一个接收MouseEvent的函数
type ClickOutsideHandler = (event: MouseEvent) => void

declare module '@vue/runtime-core' {
  interface GlobalDirectives {
    // 注册我们的自定义指令类型
    clickOutside: DirectiveBinding<ClickOutsideHandler>
  }
}

// 确保TypeScript识别这个模块
export {}

2. 给指令实现添加类型约束 #

接下来在定义指令的时候，明确指定钩子函数的参数类型，让TypeScript能正确推断所有逻辑的类型：

import { App, DirectiveBinding } from 'vue'

// 复用之前定义的处理函数类型
type ClickOutsideHandler = (event: MouseEvent) => void

const clickOutsideDirective = {
  mounted(el: HTMLElement, binding: DirectiveBinding<ClickOutsideHandler>) {
    const handler = (e: MouseEvent) => {
      // 点击元素外部时触发绑定的函数
      if (!el.contains(e.target as Node)) {
        binding.value(e)
      }
    }
    // 给元素添加自定义属性存储处理函数，方便卸载时移除监听
    el._clickOutsideHandler = handler
    document.addEventListener('click', handler)
  },
  unmounted(el: HTMLElement) {
    // 清理事件监听和自定义属性
    if (el._clickOutsideHandler) {
      document.removeEventListener('click', el._clickOutsideHandler)
      delete el._clickOutsideHandler
    }
  }
}

// 扩展HTMLElement类型，允许我们添加自定义的处理函数属性
declare global {
  interface HTMLElement {
    _clickOutsideHandler?: (event: MouseEvent) => void
  }
}

// 注册指令到Vue实例
export function registerClickOutside(app: App) {
  app.directive('clickOutside', clickOutsideDirective)
}

3. 使用时的类型支持 #

现在当你在模板中使用v-clickOutside="myFunc"时：

• TypeScript会自动检查myFunc是否符合(event: MouseEvent) => void的类型规范
• 编辑器会提供完整的自动补全和类型提示
• 指令再也不会被识别为any类型了

示例使用代码 #

<template>
  <button v-clickOutside="handleClickOutside">Click Outside</button>
</template>

<script setup lang="ts">
const handleClickOutside = (event: MouseEvent) => {
  console.log('Clicked outside the button!', event)
}
</script>

内容的提问来源于stack exchange，提问作者Rago