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

Question

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

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

我的代码在技术上是可行的。它显示用户 ID 就好了。

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

我定义了一个 user 道具，其类型为 User，是我从 Firebase SDK 导入的。这有效，但我在 User 类型上收到错误消息：'User' only refers to a type, but is being used as a value here. ts(2693)。为什么会出现此错误以及如何解决？
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'
  }

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

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

typescript

firebase

vue.js

vuejs3

vue-composition-api