"script setup" syntax has problems with importing types

[chojnicki]

Actually I'm not sure if this is more Vue 3 or Volar issue.

While importing "PropType" I'm getting warnings in IDE:

'PropType' only refers to a type, but is being used as a value here. ts(2693)

Code for reproduction:

<script setup lang="ts">
import { defineProps, PropType } from 'vue'

defineProps({
  demo: {
    type: Object as PropType<{ demo: string }>,
    required: true,
  },
})
</script>

Thing is, it looks fine without setup syntax.

<script lang="ts">
import { defineComponent, PropType } from 'vue'

export default defineComponent({
  props: {
    demo: {
      type: Object as PropType<{ demo: string }>,
      required: true,
    },
  }
})
</script>

Same thing happens for me while importing any custom types/interfaces.

import { SomeType } from '@/types/sometypes'

But I found out that warning also disappears after using "import type"

import type { SomeType } from '@/types/sometypes'

Cool, so accordingly we can also do this:

import { defineComponent } from 'vue'
import type { PropType } from 'vue'

But this shouldn't be necessary. I also did not found this in any vue docs or RFC. So why this TS warning appears with script setup?

Have a nice day :)

[johnsoncodehk]

Hi @chojnicki, this is vue limitation, see: vuejs/core#3183

So I create this error to avoid user runtime error.

[chojnicki]

Instant reply as always, are you resting at all? 😆

Thanks for linking issue, I will stick with import type then.

[johnsoncodehk]

I want to finish this project as soon, and then I can rest. 😅