Scenario: Utilizing vue.js (^3.2.13) with Typescript and Composition API in Visual Studio Code
File type.ts:
export class GeographicCoordinate {
latitude: number;
longitude: number;
altitude?: number;
constructor(latitude: number, longitude: number, altitude?: number) {
this.latitude = latitude;
this.longitude = longitude;
this.altitude = altitude;
}
}
Component1.vue:
import { GeographicCoordinate } from '@/interfaces/type';
const props = defineProps({
geographicCoordinate: {
type: Object as PropType<GeographicCoordinate | null>,
required: true }
});
Page.vue:
<template>
<component1
:geographic-coordinate="clickedGeographicCoordinate" @save-event="saveEvent">.
</component1>
</template>
<script lang="ts" setup>
import { GeographicCoordinate } from '@/interfaces/type';
var clickedGeographicCoordinate = ref<GeographicCoordinate | null>(null);
</script>
In my Visual Studio Code, no hints or errors are present. However, upon opening it in Chrome, an error is displayed in the console:
[Vue warn]: Invalid prop: type check failed for prop "geographicCoordinate". Expected Object, got Null
Why does the Vue runtime display that null is not accepted?
What would be the recommended approach if a component should accept a prop value as an instance of a class or null?