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...
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?
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>
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
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'
}