CODEWITHSUNDEEP
typescriptvue.js
stackoverfloweth
stackoverfloweth

Reputation: 6907

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

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

Upvotes: 13

Views: 48723

Answers (3)

Craig Harshbarger
Craig Harshbarger

Reputation: 2233

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

Upvotes: 26

Luckylooke
Luckylooke

Reputation: 4539

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

Upvotes: 4

Daniel
Daniel

Reputation: 8647

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

Upvotes: 4

Related Questions