Vue 3.2 <script setup> 标签和 TypeScript 类型的问题

Question

我正在尝试将 Vue 3.2 <script setup> 标记与 TypeScript 一起使用。

我有一个简单的用例，我想在模板中显示用户 ID。

我的代码在技术上可以正常工作。它可以很好地显示用户 ID。

但是有两件奇怪的事情......

1. 我定义了一个 user 属性，类型为 User，我从 Firebase SDK 导入。这可行，但我在User 类型上收到错误消息：'User' only refers to a type, but is being used as a value here. ts(2693)。为什么会出现此错误以及如何解决？

2. help docs 说我不需要import { defineProps } from "vue";。但如果我不进行导入，我会收到 'defineProps' is not defined 错误。这令人困惑。当文档另有说明时，为什么我要强制导入它？

这是我的完整代码：

<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

在script setup 中，您可以改为这样定义道具：

<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>

另一个解决方案是@bassxzero 建议的，你可以使用

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

如果不使用withDefaults，它将被自动要求

还有，关于：

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

你其实不需要导入它，但是你需要在.eslitrc.js里面定义它

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