You should use it with PropType imported from vue like Object as PropType<FlashInterface>:
import FlashInterface from '@/interfaces/FlashInterface';
import { ref,PropType, defineComponent } from 'vue';
import { useStore } from 'vuex';
export default defineComponent({
props: {
message: {
type: Object as PropType<FlashInterface>,
required: true
}
},
setup(props) {
// Stuff
}
});
Note : you should create your component using defineComponent in order to get the types inference.
script setup
<Vue3.3 :
You could define the props using defineProps function in two ways, but you should declare the types/interfaces inside the script setup as mentioned here :
<script setup lang="ts">
import { ref,PropType, defineComponent , defineProps} from 'vue';
interface FlashInterface {
level: string,
message: string,
id?: string
}
interface IProps{
message : FlashInterface
}
const props = defineProps<IProps>()
or
<script setup lang="ts">
...
interface FlashInterface {
level: string,
message: string,
id?: string
}
const props = defineProps({
message: {
type: Object as PropType<FlashInterface>,
required: true
}
})
Update Vue 3.3+
Since Vue 3.3 (as april 2023 is in beta), the PR 8083
Set in your package.json under dependencies
"vue": "^3.3.0-beta"
Now the defineProps<T>() macro accept an imported interface and you can do this:
import FlashInterface from '@/interfaces/FlashInterface';
import { defineProps } from 'vue';
export default defineProps<FlashInterface>();