Vue 3 Typescript 道具：[Vue warn]：道具无效：道具“组织”的类型检查失败。预期为空 | 布尔值，得到对象

Question

我正在使用 Quasar/Vue 构建一个应用程序。我将“组织”对象传递给组件

\n

<q-tab-panel name="roles">\n   <OrganisationRolesTab :organisation="organisation"></OrganisationRolesTab>\n</q-tab-panel>\n

\n

在 OrganizationRolesTab.vue 内部，我通过 DefineProps 通用符号定义了 prop“组织”：

\n

<template>\n  {{ organisation }}\n</template>\n\n<script setup lang="ts">\nimport { IOrganisation } from \'src/interfaces/IOrganisation\'\n\ndefineProps<{ organisation: IOrganisation | false }>()\n</script>\n

\n

I 组织是：

\n

export interface IOrganisation {\n  id?: string\n  title: string\n  shortTitle: string\n  createdAt?: Date\n  updatedAt?: Date\n}\n

\n

这在控制台中向我发出警告：

\n

runtime-core.esm-bundler.js?f781:38 [Vue warn]: Invalid prop: type check failed for prop "organisation". Expected Null | Boolean, got Object  \n  at <OrganisationRolesTab organisation= {id: \'94de89d3-38f2-4410-bf86-74db781b18aa\', createdAt: \'2022-06-13T15:11:45.185Z\', updatedAt: \'2022-07-03T14:24:26.103Z\', title: \'Test organisation\', shortTitle: \'test\'} > \n  at <QTabPanel name="roles" > \n  at <BaseTransition appear=false persisted=false mode=undefined  ... > \n  at <Transition name="q-transition--slide-right" > \n  at <QTabPanels modelValue="roles" onUpdate:modelValue=fn animated="" > \n  at <OrganisationEdit onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy\xc2\xa0{__v_skip: true} > > \n  at <RouterView> \n  at <QPageContainer class="q-ma-sm" > \n  at <QLayout view="lHh Lpr lFf" > \n  at <MainLayout onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy\xc2\xa0{$i18n: {\xe2\x80\xa6}, $t: \xc6\x92, $rt: \xc6\x92,\xc2\xa0\xe2\x80\xa6} > > \n  at <RouterView> \n  at <App>\n

\n

如何在不丢失输入内容的情况下消除此警告？

\n

Answer 1

该文档说明了以下限制defineProps：

截至目前，类型声明参数必须是以下之一以确保正确的静态分析：

• 类型文字
• 对同一文件中的接口或类型文字的引用

目前不支持复杂类型和从其他文件导入类型。将来有可能支持类型导入。

解决方法是使用等效的选项参数defineProps：

<script setup lang="ts">
import type { PropType } from 'vue'

defineProps({
  organisation: Object as PropType<IOrganisation | boolean>
})
</script>