Currently, I am utilizing Vue 3 alongside the Composition API and TypeScript, all updated to their latest stable versions.
If we take a look at the types below:
export interface Person {
name: string;
}
export type Status = Person | 'UNLOADED' | null;
My goal now is to utilize Status as a prop in a component, but excluding the possibility of null since validation has already been performed in the parent component, making redundant to validate null again.
In order to achieve this, we can make use of the Exclude utility type:
<script setup lang="ts">
const props = defineProps<{
status: Exclude<Status, null>;
}>();
</script>
Upon implementing this, all validations within the component function correctly.
However, upon running the application and passing 'UNLOADED' as the prop value, a warning is displayed:
[Vue warn]: Invalid prop: type check failed for prop "status".
Expected Object, received String with value "UNLOADED".
This led me to try translating it to the Options API. Surprisingly, the following declaration worked flawlessly:
<script lang="ts">
import {defineComponent, PropType} from 'vue';
export default defineComponent({
props: {
status: {
type: [Object, String] as PropType<Exclude<Status, null>>,
required: true,
},
},
});
</script>
Hence, it appears that in the Composition API, Vue always considers that Exclude returns an object, resulting in complaints about a nonexistent prop validation error when a string is passed (which is not treated as an object).
Could this be a bug?
How can I address this issue using the Composition API?