VUE 3打字稿道具：[Vue Warn]：无效的道具：类型检查失败了“组织”。预期null |布尔，有对象

Question

我正在使用类Quasar/Vue构建应用程序。我将“组织”对象传递到

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

OrganisationRolestab中的组件。即使我通过DefineProps通用符号定义了“组织”，Iormanisation：

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

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

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

Iorganization是：

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

docs 说明defineprops的限制/代码>：

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

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

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

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

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

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