2.2.0 vue-tsc component ref

[k983551019]

Vue - Official extension or vue-tsc version

2.2.0

VSCode version

1.96.0

Vue version

3.5.13

TypeScript version

5.7.2

System Info

System:
    OS: macOS 14.6.1
    CPU: (8) arm64 Apple M1
    Memory: 49.22 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.18.0 - ~/.nvm/versions/node/v20.18.0/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v20.18.0/bin/npm
    pnpm: 8.6.2 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 131.0.6778.205
    Edge: 131.0.2903.112
    Safari: 17.6

package.json dependencies

No response

Steps to reproduce

pnpm i
pnpm build

What is expected?

Passed normally

What is actually happening?

Link to minimal reproduction

https://github.com/k983551019/volar-tsc/tree/main/volar-tsc

Any additional comments?

Encapsulation components

[KazariEX]

This is caused by the declaration file generated by element plus being too large (13k lines for el-select).

[KazariEX]

If it is only for type checking, you can choose not to emit declaration.

[k983551019]

If it is only for type checking, you can choose not to emit declaration.

[KazariEX]

The refs declared in the template will be automatically mounted on the component instance, regardless of useTemplateRef.

[k983551019]

const elSelectRef = ref()
the same

[RayGuo-ergou]

There's a entire thread in typescript talked about this microsoft/TypeScript#47663, you can take a look.

Long story shot you are generating the type declaration file but the type referenced from an external package which typescript cannot find ( and the ui lib's types are too big, so you have two separated issue).

As @KazariEX mentioned you really don't need to emit the declarations as you are not building a library.

So you could just change your typecheck script without --build e.g. vue-tsc or vue-tsc --no-emit.

Btw this is a pretty bad practice of using template refs. What you wanted to do probably can be done by props and events.

@KazariEX I think this issue can be transferred to discussion since it's not a bug neither feature request.

[ghiscoding]

removing --build also fixed a similar issue I had in my project as well but I thought I would mention that the build option is what the Vite/Vue boilerplate includes by default and so this problem might be caught by multiple users in the new version v2.2.0 (it wasn't an issue with v2.1.10). The boilerplate includes this npm script: "type-check": "vue-tsc --build --force"

[RayGuo-ergou]

Just create one with pnpm create vue@latest

I see the tsconfig.json extends @vue/tsconfig/tsconfig.dom.json which set "noEmit": true, so they should be fine. ( Also tested)

with

const foo = ref('foo')

[RayGuo-ergou]

Also not sure but this might help,

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "vue": ["node_modules/xxx"],
	  "@vue/shared": ["node_modules/xxx"],
    }
  }
}

[ghiscoding]

I created my app over 6 months ago, so the boilerplate might be different now since I have 4 tsconfig{app,node,vitest} and adding noEmit and the paths to both app and node didn't help. The only fix that really works is to drop --build --force, I'm not building a library, so it should be fine I guess.

Side note, on another project that I created just couple weeks ago using the create app boilerplate, it does seem to have the same setup as I mentioned above (4 tsconfig) and that one is a library and I do have the --build --force in there too but that one doesn't throw any error, it's a little strange... but again I'm fine without the --build for my App build

[RayGuo-ergou]

btw forget to mention if you really want to emit the declarations, this should fix the first error

const elSelectRef: Ref<type> = ref()  

but still, second issue is related to external dependency.