Vue3 using Interface as Prop Types - vuejs3

Question

I am having an issue using an Interface as a Vue3 Prop, the goal is to use the interface as a type check on the prop: (We are using Nuxt3 so alot of the imports are not listed below)
// IsProduct.ts
export interface IsProduct {
_id: string;
productName: string;
icon: string
}
// ProductDisplay.vue
<script lang="ts" setup>
import { IsProduct } from "./IsProduct";
interface Props {
product: IsProduct | string | null;
}
const {
product = null,
} = defineProps<Props>();
let productObj: IsProduct = ref(null);
let productRef: string = ref(null);
let displayText: string = ref("");
watch(
() => product,
() => {
initialize();
},
{ immediate: true }
);
function initialize() {
productRef = null;
productObj = null;
if (!product) return;
if (typeof product === "object") {
productRef = product._id;
productObj = product;
}
if (typeof product === "string") {
productRef = product;
productObj = productByRef[product]; //<-- productByRef goes to Pinia store
}
}
</script>
<template>
<span>
<span v-if="productObj">{{productObj.productName}} <fa-icon :icon="productObj.icon"></span>
</span>
</template>
// ProductList.vue
<script lang="ts" setup>
const { products } = useProductStore() // <-- list of products from Pinia store
</script>
<template>
<div>
<-- THIS WORKS because the _id is a string, no Vue warnings -->
<ProductDisplay :product="p._id" v-for="p of products" :key="p._id" />
<-- HAS VUE WARNINGS because the p is the full Object-->
<ProductDisplay :product="p" v-for="p of products" :key="p._id" />
</div>
</template>
Is there a way to have Vue understand that when a full Object is passed in that it uses the IsProduct interface?

Answer 1

I found a 'work around' for the example that I posted above:
// IsProduct.ts
export interface IsProduct {
_id: string;
productName: string;
icon: string
}
// ProductDisplay.vue
<script lang="ts" setup>
...
interface Props {
product: {_id: string} | string | null; <-- Change the Interface to an Object
}
...
function initialize() {
productRef = null;
productObj = null;
if (!product) return;
if (typeof product === "object") {
productRef = product._id;
productObj = product as IsProduct; <-- cast the product prop as IsProduct
}
}
...
</script>
Since the ProductDisplay.vue component is looking for either a Product Object or the string _id of a Product, in the Props I just defined an Object with _id of string since that is required. This tells the Vue compiler, 'hey this is either an object or a string' and there are no warnings in the devtools console.
Later in the code I check if this is an Object and if so, then cast the Object to the 'type of' IsProduct. This removes the Typescript warnings in VSCode.