Vue 3 Typescript props: [Vue warn]: Invalid prop: type check failed for prop "organisation&quot-CodePudding

I'm building an app with Quasar/Vue. I'm passing the "organisation" object to the component

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

Inside OrganisationRolesTab.vue I define the prop "organisation" via the defineProps generic notation:

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

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

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

IOrganisation is:

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

This gives me the warning in console:

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  > 
  at <QLayout view="lHh Lpr lFf" > 
  at <MainLayout onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {$i18n: {…}, $t: ƒ, $rt: ƒ, …} > > 
  at <RouterView> 
  at <App>

How do I get rid of this warning without losing the typing?

CodePudding user response：

The docs state the limitations of defineProps:

As of now, the type declaration argument must be one of the following to ensure correct static analysis:

A type literal

A reference to an interface or a type literal in the same file

Currently complex types and type imports from other files are not supported. It is possible to support type imports in the future.

A workaround is to use the equivalent options argument of defineProps:

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

defineProps({
  organisation: [Object as PropType<IOrganisation>, Boolean]
})
</script>