Estoy tratando de usar la etiqueta Vue 3.2 <script setup> con TypeScript.
Tengo un caso de uso simple en el que quiero mostrar una ID de usuario en la plantilla.
Mi código está técnicamente funcionando. Muestra la ID de usuario muy bien.
Pero hay dos cosas raras...
He definido una propiedad de user con un tipo de User que importé del SDK de Firebase. Esto funciona, pero aparece un error en el tipo de User que dice: 'User' only refers to a type, but is being used as a value here. ts(2693) . ¿Por qué recibo este error y cómo solucionarlo?
Los documentos de ayuda dicen que no necesito import { defineProps } from "vue"; . Pero si no realizo la importación, obtengo un 'defineProps' is not defined . Esto es confuso. ¿Por qué me veo obligado a importarlo cuando los documentos dicen lo contrario?
Aquí está mi código completo:
<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>en script setup , puede definir accesorios como este en su lugar:
<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>otra solución es como sugirió @bassxzero, puede usar
defineProps<{ user: { type: Object as PropType<User>; required: true } }>() sin usar withDefaults , se requerirá automáticamente
también, sobre:
import { defineProps } from "vue"; //Docs say this is not needed, but it throws an error without it en realidad no necesita importarlo, pero debe definirlo dentro .eslitrc.js
globals: { defineProps: 'readonly', defineEmits: 'readonly', defineExpose: 'readonly', withDefaults: 'readonly' }