Vue 3 自定义指令严格类型的核心是用 TypeScript 接口明确定义 binding 的 value、arg、modifiers 及钩子参数类型，通过 ObjectDirective 泛型绑定元素与 binding 类型，确保 IDE 校验和 TS 拒绝非法赋值。
Vue 3 中为自定义指令编写严格类型，核心是用 TypeScript 接口明确约束指令的绑定值（value）、参数（arg）、修饰符（modifiers）以及钩子函数的参数类型。不能只靠运行时逻辑推断，必须在声明阶段就提供完整类型定义。
定义指令参数的接口类型
先为指令可能接收的绑定值、参数、修饰符建模。例如一个聚焦并高亮文本的指令 v-focus-highlight：
interface FocusHighlightBinding {
value?: boolean;
arg?: 'start' | 'end';
modifiers: {
exact?: boolean;
case?: boolean;
};
}
这个接口描述了开发者能传什么、哪些可选、修饰符有哪些合法键名，IDE 和类型检查器都能据此校验使用方式。
立即学习“前端免费学习笔记（深入）”；
为指令钩子函数标注完整参数类型
使用 Directive 泛型配合自定义接口，确保 mounted、updated 等钩子中 binding 的类型精确：
import { Directive, ObjectDirective } from 'vue';
const vFocusHighlight: ObjectDirective
mounted(el, binding) {
// binding.value 是 boolean | undefined
// binding.arg 是 'start' | 'end' | undefined
// binding.modifiers.exact 是 boolean | undefined
if (binding.value && el.focus) {
el.focus();
if (binding.arg === 'start') {
el.setSelectionRange(0, 0);
}
}
}
};
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
注意：泛型第一个参数是宿主元素类型（如 HTMLElement），第二个是 binding 类型。这样写，TS 就能拒绝 v-focus-highlight="42" 这类非法赋值。
全局注册时保持类型传递
在 main.ts 中注册时，不要丢失类型信息：
import { createApp } from 'vue';
import App from './App.vue';
import { vFocusHighlight } from './directives/focus-highlight';
const app = createApp(App);
app.directive('focus-highlight', vFocusHighlight); // TS 能推导出该指令接受 FocusHighlightBinding 类型
如果用 app.directive('xxx', {}) 这种内联对象写法，务必显式标注类型：
app.directive('my-directive', {
mounted(el, binding) { /* ... */ }
});
处理复杂绑定值（对象/函数）需显式标注
若指令接收对象或回调，不能省略类型：
- 绑定值是配置对象：
interface TooltipOptions { content: string; delay?: number; position?: 'top' | 'bottom'; }，则用ObjectDirective<htmlelement tooltipoptions></htmlelement> - 绑定值是函数：
ObjectDirective<htmlelement event> void></htmlelement>，确保触发时参数类型安全 - 避免使用
any或不写泛型——否则失去类型约束意义
