Problems with Vue 3.2 <script setup> tag and TypeScript types

Question

I'm trying to use the Vue 3.2 <script setup> tag with TypeScript.

I have a simple use case where I want to display a user ID in the template.

My code is technically working. It displays the user ID just fine.

But there are two weird things...

1. I have defined a user prop with a type of User that I imported from the Firebase SDK. This works, but I get an error on the User type that says: 'User' only refers to a type, but is being used as a value here. ts(2693). Why am I getting this error and how to fix it?

2. The help docs say I do not need to import { defineProps } from "vue";. But if I don't do the import I get a 'defineProps' is not defined error. This is confusing. Why am I forced to import it when the docs say otherwise?

Here is my full code:

<template>
  <div>Logged in as {{ user.uid }}</div>
</template>

<script setup lang="ts">
import { defineProps } from "vue"; //Docs say this is not needed, but it throws an error without it
import { User } from "firebase/auth";

defineProps({
  user: {
    type: User, //ERROR: 'User' only refers to a type, but is being used as a value here. ts(2693)
    required: true,
  },
});
</script>

Answer 1

in script setup you can define props like this instead:

<template>
  <div>Logged in as {{ user.uid }}</div>
</template>

<script setup lang="ts">
import { defineProps } from "vue"; //Docs say this is not needed, but it throws an error without it
import { User } from "firebase/auth";

defineProps<{ user: User }>();
</script>

another solution is as @bassxzero suggested, you can use

defineProps<{ user: { type: Object as PropType<User>; required: true } }>()

without using withDefaults it will be automaticly required

EDIT: The answer below this line is outdated, it was based on this old docs. you should check the newer docs here.

also, about:

import { defineProps } from "vue"; //Docs say this is not needed, but it throws an error without it

you actually don't need to import it, but you need to define it inside .eslitrc.js

globals: {
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly',
    withDefaults: 'readonly'
  }

Answer 2

This solved the problem for me

.eslintrc.cjs

extends: [...],
env: {
  "vue/setup-compiler-macros": true,
},
rules: {...}