Volar does not takeover when type-checking .js

[matthew-dean]

As you know, in TypeScript, you can define a type-checked file in a few ways:

1. With a .ts extension & tsconfig.json file for compiler settings
2. With a .js extension & tsconfig.json with allowJs: true and checkJs: true
3. With a .js extension & jsconfig.json with checkJs: true.
4. With a .js extension and // @ts-check at the top of the file

This implies that a .vue file should be interpreted in "TypeScript-mode" if any of the above are true.

However, it appears that Volar / Vue language services only initiate takeover mode if a Vue tag has <script lang="ts"> or <script setup lang="ts"> IMO this is incorrect. For instance, in my setup, jsconfig.json is defined, and set to type-check all JS. I also tried adding "include": ["./lib/**/*.vue", "./lib/**/*.js"] but this had no effect.

I've defined a computed prop with JSDoc like:

computed: {
    /** @returns {[string, any][]} */
    dynamicSlots () {
      return Object.entries(this.$slots).filter(([key]) => key !== 'drag-image' && key !== 'default');
    }
  }

However, in the <template> block, it reports that dynamicSlots has a type of any. If I change the script setup to <script type="ts">, it works, but I don't think this should be necessary?

Or, is there another way to enable Vue TypeScript language services for a type-checked JS document?

[GrantGryczan]

This! Takeover mode not working in JSDoc comments not only results in this doing nothing, but it also results in an error being displayed in my editor.