VUE/TS: Property 'moveTopLeft' does not exist on type '{}'.

[DevKame]

I have a callbackfunction for a clickevent:

<script lang="ts" setup>
import { ref } from 'vue';
let workTopButton = ref<string>("port");

function moveTopLeft(): void {
    console.warn(workTopButton.value);
    switch(workTopButton.value) {
        case "port":
            workTopButton.value = "sport";
            break;
        case "sport":
            workTopButton.value = "math";
            break;
        case "math":
            workTopButton.value = "vocab";
            break;
        case "vocab":
            workTopButton.value = "port";
            break;
    }
}
</script>

And on clicking the particular element it works fine, but ts is crying, and today with another, for me totally new wave of error messages.
Here is the "weird" part thats highlighted red in my IDE:

and on hovering over the upper error in line 66 i get jumped by this:

And on hovering the lower error in line 81 i get this:

How do i fix that and more important, what causes this purely new Error messages?

[modelair]

no errors here

[DevKame]

hey great, it works on your machine!! And what exactly am i supposed to do with this information?

[LinusBorg]

This error looks like your local Vue/TS IDE support is messed up.

The "Vue Language Tools" extension recently released Version 2.0 As part of that major release, you no longer need the separate Vue-Language Tools TSPlugin extension, and the language tools' takeover mode no longer requires to disable the defaul Typescript language server.

You should have seen an info popup saying as much when you upgraded the extension (if you did).

So I'd take a look at that.

1. re-enable the builin Typescript extension
2. remove the Vue Typescript plugin extension
3. restart VSCode

If that fails, reinstall the Vue Language Tools extension.

If that fails, try going back to its 1.* version.

If that fails, report back here.

[DevKame]

The reason i am answering that late is that i managed to fix that graphical error by reinstalling my Language Support for Vue. But now im facing another issue and i ahve the feeling thats my IDE support is still messed up.

Can you elaborate that a little, because i have no particular Extension for Typescript, as far as i remember is someday installed Typescript itself globally with npm and thats it. The only Extension for langauge support i have is this one:

To be honest, i didnt know that i had this "Vue- official" Extension installed. For language Support i used to install "Volar", what, for some reason, isnt there anymore 😆

What also crossed my eyes is the fact that on my secondary PC im sitting right now, i dont even have any extension regarding typescript. Yo talked about a "build-in" Typescript extension. Are those build in extensions visible in another menu?

what extensions should i install for a smooth developer experience using Vue with typescript?

[LinusBorg]

You could have a look at our docs:

https://vuejs.org/guide/typescript/overview.html#ide-support

• The Volar extension has been renamed to Vue - Offical to reflect that it's no longer a community-provided extension but part of our offering.
• The extension has reached 2.0, after which "Takeover mode" is no longer necessary.
• If you used Volar before, you should be familiar with takeover mode, as it was required to enable it to get full type support.
• "Takeover Mode" required you, the user of VSCode, to disable VSCode's built-in Typescript Language server - Volar "takes over" it's place (Here's a link showing the now-removed instructions for that).