Incorrect handling of importing types in script-setup

[roamiiing]

App.vue:

<template>
  <div @click="count++">{{ count }}</div>
</template>

<script setup lang="ts">
import { ref, Ref } from 'vue';

const count: Ref<number> = ref(0);
</script>

I see that explicitly defining the Ref<number> type is not necessary, but this is just an example. VSCode shows an error in the import statement:

Which is not actually an error because the imported type Ref is not being used as a value anywhere. This doesn't happen if we rewrite this code without using <script setup>:

<template>
  <div @click="count++">{{ count }}</div>
</template>

<script lang="ts">
import { defineComponent, ref, Ref } from 'vue';

export default defineComponent({
  setup() {
    const count: Ref<number> = ref(0);

    return {
      count,
    };
  },
});
</script>

[jods4]

This is a problem with the Vue compiler, the main issue about it is here:
vuejs/core#3183

Your code is correct, but the compiler exposes all imports (without knowing if they're a type or not, as there's not cross-file analysis going on here) to the template.
This puts Ref, a type, into a position where it can't be used, something like return { Ref } at the end of the setup function.

A consequence is that it's impossible to use const enums in script setup, see #277 as well.

[roamiiing]

Well now I see what is going on with that, but I am curious why then am I not getting a runtime error

[jods4]

Prob. because your code doesn't use that value symbol.
If the export ends up with an unused, Ref property set to undefined, nothing bad is gonna happen.

I also believe that in production build, script setup is compiled differently, with a closure. This way doesn't cause any type to leak at all, either.

[johnsoncodehk]

This is designed behavior to prevent runtime error. See #209 (comment).