fix: typescript for script setup incorrect.

[TrungRueta]

🐛 The bug As from version 0.28 we start support script setup. Test files for now only on javascript. In Typescript i found that ref variables not converted to value on template:

Our document still not mention about typescript type, since we use unplugin-vue2-script-setup for script setup, i try to add unplugin-vue2-script-setup/types to tsconfig.json. Result is ref variable turn to correct, but now all custom component turn to any.

This issue go away if use @vue/composition-api with unplugin-vue2-script-setup. So i think issue come from our package somehow

🛠️ To reproduce Steps to reproduce the behavior:

1. create new nuxt project
2. install @nuxtjs/composition-api
3. write new custom component use script setup, like in screenshot
4. see error about ref variable
5. isntall unplugin-vue2-script-setup. add tsconfig.json
6. create new Test component use script setup
7. import Test component to main component
8. see error when component inspected as ANY.

[danielroe]

@TrungRueta Would you provide a reproduction via https://template.nuxtjs.org ? 🙏

[TrungRueta]

@danielroe HiDaniel! Thank for look my issue <3

I created online sandbox follow you suggest, but sandbox only makesure my demo working on runtime while issue come from mismatch typescript type checking lead to volar incorrect spell checking.

sandbox

so i deploy sandbox to a git , you can clone git, install use yarn then open page/index.vue . i leaved 2 variables and comment explain issue with type checking. git

steps:

• clone git, install packages by yarn
• open by vscode, disable vetur and install volar extension
• open file page/index.vue
• see variable a (which is a ref use our package)
• see a used in template. it correct in runtime (draw value true), but wrong in typescript checking (volar say it is Ref<boolean> not boolean).
• see b. uncomment it on script and template, see volar say it ok . ( but runtime will failed, ofcouse because we are using vue 2, vue/reactivity is not meaning)
• Now hover mouse to <Test/> tag , you will see vscode show correct type of component.
• open tsconfig.json. un comment types "unplugin-vue2-script-setup/types". reload vscode, then go back to file index.vue and you will see a for now understand correct is boolean.
• now hover mouse to <Test /> component, you will see it become any. lost all type checking

---

Actually i spend hours to try install our package, unplugin-vue2-script-setup from antfu, compare d.ts files , finally i think i found issue:

• Volar extension for now is only one ext support script setup , vetur still not
• To use Volar with Vue2 + typescript, we need install @vue/dom-runtime as dev package and let it read by volar.
• nuxtjs/composition-api has own Ref<T> which return by ref().
• Look like vue 3 has same type Ref<T> but different define. Volar only accept this Ref type to convert in template tag.
• Add "unplugin-vue2-script-setup/types" in tsconfig.json help overwrite Ref<T> type by antfu , but it also overwrite other typechecking . i guess between d.ts has breaking somewhere, it lead vscode typescript language parse wrong and give any to everywhere.

I hope my explains well enough to located problem.

Thank you again for wonderful project!!! Trung