Vue3+TS defineProps声明对象类型prop报类型校验警告解决

警告由Vue运行时Prop校验规则与TS声明类型不匹配导致：

• 纯TS泛型写法的defineProps依赖编译期推导运行时校验规则，而TypeScript的interface类型编译后会被擦除，Vue编译器无法识别自定义接口IOrganisation对应的运行时类型为Object
• 最终生成的运行时校验规则仅识别到联合类型中的原始类型false（对应Boolean类型），传入对象类型的organisation值时就会触发类型不匹配警告。

通过Vue内置的PropType工具类型显式绑定TS类型与运行时类型，可在完全保留TS类型校验能力的前提下，生成正确的运行时校验规则，消除警告。
修改OrganisationRolesTab.vue的代码如下：

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

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

defineProps({
  organisation: {
    type: [Object, Boolean] as PropType<IOrganisation | false>,
    required: true
    // 如需默认值可添加配置：default: () => false
  }
})
</script>

写法说明 #

• 运行时类型数组[Object, Boolean]分别对应IOrganisation对象、false布尔值两种合法值，Vue运行时可正确识别校验规则
• as PropType<IOrganisation | false>将TS类型与运行时类型强绑定，不会丢失任何类型提示：传false时TS会推导为布尔类型，传组织对象时会自动推导为IOrganisation类型，属性补全、类型校验能力完全保留
• 该写法兼容所有Vue3+TS版本，稳定性最高，禁止使用@ts-ignore、修改类型为any等会丢失TS校验能力的临时方案。

内容的提问来源于stack exchange，提问作者Max Kitsch