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[]
}>()

Answer 2

Nuxt3, setup, lang=ts

import {ComponentObjectPropsOptions} from "vue";

interface Props {
  foo: string
  bar?: number
}

const props = defineProps<ComponentObjectPropsOptions<Props>>({
  foo: {
    type: String, 
    required: true,
    validator(value: unknown): boolean {
      return true
    }
  },
  bar: Number
})