When utilizing it, make sure to use 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) {
            // Operaions go here
        }
});

Please note: ensure your component is created using defineComponent for proper types inference.

script setup

<Vue3.3 :

You can define the props by using the defineProps function in two ways, but remember to declare the types/interfaces within the script setup as detailed 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+

Add this line in your package.json under dependencies

"vue": "^3.3.0"

Now, the defineProps<T>() macro can receive an imported interface making it possible to do this:

import FlashInterface from '@/interfaces/FlashInterface';
import { defineProps } from 'vue';

export default defineProps<FlashInterface>();

If you need to define default values, you can do so like this:

const { 
  message = "No message :(",
  level,
  id,
} = defineProps<FlashInterface>();

This feature was officially included in Vue 3.3.0 through PR 8083

Two line script setup

<script type="text/javascript">
import FlashInterface from '@/interfaces/FlashInterface';
defineProps<{flash: FlashInterface;}>();
</script>

The compiler is raising an issue regarding the absence of a reference for a (custom) constructor during type checking (the link may point to legacy documentation but behaves similarly with the latest Vue version).

When working with Typescript, interfaces can be viewed as a set of rules that an entity must adhere to; they do not act as constructors. Therefore, it's necessary to provide an implementation of these interfaces.

If you intend to maintain the interface while using Typescript, consider utilizing the class equivalent:

// Choose any name for the constructor,
// although prefacing interfaces with 'I' helps differentiate them from constructors

class Flash implements FlashInterface {
  level: string;
  message: string;
  id?: string;

  constructor() {
    // Initialize values for non-nullable properties
    this.level = '';
    this.message = '';
  }
}

export default {
  name: 'Home',

  props: {
    message: Flash
  }
}

A segment from the documentation states:

Furthermore, type can also refer to a custom constructor function, with the assertion performed using an instanceof check. For example, assuming the following constructor function is in place:

props: {
  message: {
    type: function Person(firstName, lastName) {
      this.firstName = firstName;
      this.lastName = lastName;
    }
  }
}

Alternatively, as mentioned in another post, you could explore the use of PropType. Both options are valid—it ultimately comes down to personal preference.

To easily define your props, utilize the setup script.

<script setup lang="ts">
import { ref } from 'vue';
import { useStore } from 'vuex';
interface FlashInterface {
    level: string,
    message: string,
    id?: string
}
interface Props{
   message:FlashInterface
}
const props = defineProps<Props>()

For further details and guidance, check out the Vue documentation

Utilizing PropType from 'vue' is recommended when dealing with manually created interfaces and setting default values!

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>,
           default: {}
       }
   },
// additional code
});

I have come up with a solution to address this issue by introducing a generic props type along with a function to ensure the correct implementation of the props.

type TypedProps<T> = {
  [key in keyof T]: {
     type: PropType<T[key]>
     required?: boolean
  } | PropType<T[key]>
}

function validateProps<T extends object>(props: TypedProps<T>): TypedProps<T> {
   return props
}

I plan to incorporate it into my defineComponents method like this

interface MyProps {
  prop1: string
  prop2: CustomInterface
}
export default defineComponent({
  props: validateProps<MyProps>({
    prop1: String,
    prop2: Object as PropType<CustomInterface>
  })
})

However, there seems to be an issue with the use of the required attribute. I am seeking clarification on why this is happening or suggestions for improvement.

Using Object as PropType seems a bit odd and hard to remember. A more elegant approach for typing properties is by specifying a generic type argument directly in the defineProps function, like this example using

<script setup lang="ts">

const props = defineProps<{ message: FlashInterface }>()