Vue 3 defineProps with Types and ComponentObjectPropsOptions (like default or validator)

Question

From within a setup method, using defineProps I can use

const props = defineProps<{tabs: Tab[]}> = ()

which allows me to have the type Tab[] on props.tabs

however, if I want to specify ComponentObjectPropsOptions, I believe the syntax is

const props = defineProps = ({
  type: Array, //can not use Tab[] here
  required: true,
  validator: ...
})

but with that syntax I lose my type on props.tabs :(

Answer 1

You'll need to use the PropType utility to type cast your array.

https://vuejs.org/api/utility-types.html#proptype-t

const props = defineProps({
  tabs: {
    type: Array as PropType<Tab[]>,
    required: true,
    validator: ...
  },
})

Or use type only prop declarations by passing the type for your props as the generic to defineProps rather than passing a props object as an argument.

const props = defineProps<{
  tabs: Tab[]
}>()