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);
}
}
}
};
