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

user_3511012 0
Viewed 5650

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 :(

vue.js typescript
3 Answers
user_26878610

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
})
user_63980440

Vue3 (Vite), setup, lang-ts

Thanks @Daniel I had to augment code from your answer to be valid in my environment.

  1. import type instead of just import
  2. export interface Props
import type { ComponentObjectPropsOptions } from "vue";

export interface Props {
    foo: string
    bar?: number
}

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