如何为自定义全局Vue指令添加TypeScript类型提示？

要解决全局注册指令后无类型提示的问题，核心是通过TypeScript的模块扩展机制，把自定义指令的类型注入到Vue的全局类型定义中，具体步骤如下：

• 创建类型声明文件
  在项目的类型目录（比如src/types/）下新建vue.d.ts文件，内容如下：

  import type { Directive } from 'vue';
  
  declare module 'vue' {
    // 扩展全局指令接口，添加自定义指令的类型
    interface GlobalDirectives {
      // vFocus指令的类型：第一个泛型是指令绑定的元素类型，第二个是绑定值的类型
      vFocus: Directive<HTMLElement, void>;
      // 如果你的指令需要接收绑定值，比如v-focus="someValue"，把void替换成对应类型（如string、number）
    }
  }
  
  // 必须导出空对象，确保文件被识别为ES模块
  export {};
  

• 配置TypeScript识别类型文件
  在tsconfig.json的include数组中添加类型文件路径，确保TS能加载到这个扩展声明：

  {
    "include": [
      "src/**/*.ts",
      "src/**/*.d.ts",
      "src/**/*.tsx",
      "src/**/*.vue"
    ]
  }
  

• 全局注册指令时的类型提示
  现在在main.ts中执行全局注册时，app.directive('focus', vFocus)就会自动获得类型校验和提示——TS会校验传入的vFocus是否符合GlobalDirectives中定义的vFocus类型，同时编辑器会给出对应的类型提示。

此外，这样配置后，在单文件组件中使用v-focus指令时，也能获得绑定值的类型校验提示。

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