Currently, I am working with the Vue 2 composition API plugin along with typescript version 3.9.7.
In my project, I have a simple type defined as Usp which I want to pass as a prop to a component named UspSection.
The structure of the USP type is outlined below:
export interface Image {
sourceUrl: string;
}
export interface ImageWithText {
text: string;
image: Image;
}
export interface Usp {
title: string;
content: string;
order: number;
reverse: boolean;
carousel: ImageWithText[];
}
Here is the script section from the UspSection component:
<script lang="ts">
import Vue, { PropType } from "vue";
import { defineComponent, ref } from "@vue/composition-api";
import { Usp } from "../types/usp";
export default defineComponent({
props: {
usp: {
type: Object as PropType<Usp>,
required: true,
},
},
setup(props) {
const slideNo = ref(0);
console.log(props.usp);
return {
slideNo,
};
},
});
</script>
However, when I run the project, Vue throws an error even though the project still functions correctly. The specific error displayed in the console reads as follows:
ERROR in C:/Users/Oliver/Workspace/duet3d/client/src/components/UspSection.vue(34,16):
...
<!-- The rest of the error message remains the same -->
Any insights into what might be causing this issue would be greatly appreciated.
Thank you!