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

Question

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

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

在 OrganisationRolesTab.vue 内部，我通过 defineProps 通用符号定义了道具“组织”：

<template>
  {{ organisation }}
</template>

<script setup lang="ts">
import { IOrganisation } from 'src/interfaces/IOrganisation'

defineProps<{ organisation: IOrganisation | false }>()
</script>

I组织是：

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

这给了我控制台中的警告：

runtime-core.esm-bundler.js?f781:38 [Vue warn]: Invalid prop: type check failed for prop "organisation". Expected Null | Boolean, got Object  
  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'} > 
  at <QTabPanel name="roles" > 
  at <BaseTransition appear=false persisted=false mode=undefined  ... > 
  at <Transition name="q-transition--slide-right" > 
  at <QTabPanels modelValue="roles" onUpdate:modelValue=fn animated="" > 
  at <OrganisationEdit onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {__v_skip: true} > > 
  at <RouterView> 
  at <QPageContainer class="q-ma-sm" > 
  at <QLayout view="lHh Lpr lFf" > 
  at <MainLayout onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {$i18n: {…}, $t: ƒ, $rt: ƒ, …} > > 
  at <RouterView> 
  at <App>

如何在不丢失输入的情况下摆脱此警告？

Answer 1

文档说明了defineProps的局限性：

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

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

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

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

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

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