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.

[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.