Props typing with Vue 3 and TypeScript

I’m trying to typehint my props in a Vue 3 component, with composition API.

So, I’m doing this:

<script lang="ts">
import FlashInterface from '@/interfaces/FlashInterface';
import { ref } from 'vue';
import { useStore } from 'vuex';

export default {
	props: {
		message: {
			type: FlashInterface,
			required: true
		}
	},
	setup(props): Record<string, unknown> {
            // Stuff
        }
};

My FlashInterface looks like this:

export default interface FlashInterface {
	level: string,
	message: string,
	id?: string
}

This interface works well except in this case where I got this error:

ERROR in src/components/Flash.vue:20:10
TS2693: 'FlashInterface' only refers to a type, but is being used as a value here.
    18 | 	props: {
    19 | 		message: {
  > 20 | 			type: FlashInterface,
       | 			      ^^^^^^^^^^^^^^
    21 | 			required: true
    22 | 		}
    23 | 	},

I don’t understand why typescript thinks this is a value.

What am I missing ?

Thanks for your help

<script lang="ts">
import FlashInterface from '@/interfaces/FlashInterface';
import { ref, PropType } from 'vue';
import { useStore } from 'vuex';

export default {
	props: {
		message: {
			type: Object as PropType<FlashInterface>,
			required: true
		}
	},
	setup(props): Record<string, unknown> {
            // Stuff
        }
};
1 Like