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

Posted 2023-02-22

【中文标题】Vue 3.2 <script setup> 标签和 TypeScript 类型的问题

【英文标题】：Problems with Vue 3.2 <script setup> tag and TypeScript types

【发布时间】：2021-12-28 02:22:25

【问题描述】：

我正在尝试将 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>

【问题讨论】：

***.com/a/64832307/909973 type: Object as PropType<User>, 确保从 vue 导入 PropType

【参考方案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'
  

【讨论】：

谢谢。 .eslitrc.js 部分效果很好，但 defineProps< user: User >(); 对我不起作用，因为我需要像 defineProps< user: type: User; required: true; ; >(); 这样的道具上的其他属性，这破坏了我模板中的 user.id 部分。所以我使用type: Object as PropType<User> 作为@bassxzero 在其他 cmets 中的建议并且有效。如果您更新答案以包含该解决方案，我会将此答案视为正确答案。

我明白了，我更新了答案

实际上我刚刚意识到.eslitrc.js 全局变量并没有完全解决问题。它阻止了 VScode 在“问题”选项卡中报告它，但是当我保存文件时 TypeScript 仍然显示error 'defineProps' is not defined。我是否还需要更新 tsconfig.json 以使其正常工作？

你用的是什么扩展？如果您使用的是 vetur，最好禁用它并将其更改为 volar。 Volar 最适合使用script setup

我正在使用 Volar。但是我刚刚重新启动了 VScode 和 npm 开发服务器，错误就消失了！ :)