Incorrect Type Inference for Custom Directives in Vue-Official 2.1.6

[wangmumu0601]

Vue - Official extension or vue-tsc version

2.1.6

VSCode version

1.94.2

Vue version

3.4.21

TypeScript version

~5.5.4

System Info

❯ npx envinfo --system --binaries --browsers

  System:
    OS: Windows 11 10.0.22631
    CPU: (24) x64 12th Gen Intel(R) Core(TM) i9-12900HX
    Memory: 37.23 GB / 63.73 GB
  Binaries:
    Node: 20.9.0 - D:\programFilesWithoutSpace\nodejs\node.EXE
    Yarn: 1.22.22 - D:\programFilesWithoutSpace\nodejs\yarn.CMD
    npm: 10.8.2 - D:\programFilesWithoutSpace\nodejs\npm.CMD
    pnpm: 7.9.0 - D:\programFilesWithoutSpace\nodejs\pnpm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527

package.json dependencies

{
  "dependencies": {
    "vue": "^3.4.21"
  },
  "devDependencies": {
    "@tsconfig/node20": "^20.1.4",
    "@types/node": "^20.16.11",
    "@vitejs/plugin-vue": "^5.1.4",
    "@vue/tsconfig": "^0.5.1",
    "npm-run-all2": "^6.2.3",
    "typescript": "~5.5.4",
    "vite": "^5.4.8",
    "vue-tsc": "^2.1.6"
  }
}

Steps to reproduce

Here’s a suggested addition to your bug report under the Steps to reproduce section:

Steps to Reproduce:

1. Create a new Vue 3 project with TypeScript enabled.

2. Define custom directives in env.d.ts as follows:

// env.d.ts
import { Directive } from 'vue';

declare module "@vue/runtime-core" {
  interface ComponentCustomProperties {
    vAdminDisabled: Directive<HTMLElement, never> | undefined;
    vAdminShow: Directive<HTMLElement, never> | undefined;
  }
}

3. Install the vue-official extension in Visual Studio Code and update to version 2.1.6.

4. Use the custom directives v-admin-disabled and v-admin-show in any Vue component template:

<template>
  <el-button v-admin-disabled="true">Delete</el-button>
</template>

Hover over v-admin-disabled in the template and observe that the type is incorrectly inferred as any.

What is expected?

The custom directives vAdminDisabled and vAdminShow should be correctly inferred by TypeScript as Directive<HTMLElement, never> | undefined when hovering over them in the template. I get this picture on vue-official version 2.1.4

What is actually happening?

i got any on vue-official version 2.1.6. <div v-admin-disabled>is also never work

Link to minimal reproduction

https://github.com/wangmumu0601/vue-official-debug

Any additional comments?

Since my English is not very good, I used GPT to help write this report. Thank you for your understanding, and I hope this issue can be resolved soon.

i have already delete Vetur before.

ohhhh, it works on: vue@3.5 and vue-official version 2.1.6 vue@3.4 and vue-official version 2.1.4

just don't work on vue@3.4 and vue-official2.1.6

[KazariEX]

It's recommended to use the following method to declare global directives:

declare module 'vue' {
  interface GlobalDirectives {
    vGlobal: Directive<HTMLElement, ...>;
  }
}

[wangmumu0601]

It's recommended to use the following method to declare global directives:

declare module 'vue' {
  interface GlobalDirectives {
    vGlobal: Directive<HTMLElement, ...>;
  }
}

thanks, it don't work also. but I use npm update --force to get newer node_modules, so the problem is solved