Vue 3 DefineProps 与 Types 和 ComponentObjectPropsOptions（如默认值或验证器）

Question

从设置方法中，使用defineProps我可以使用

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

Tab[]这让我可以打开类型props.tabs

但是，如果我想指定ComponentObjectPropsOptions，我相信语法是

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

但使用这种语法我失去了我的类型props.tabs:(

Answer 1

您需要使用该PropType实用程序来对数组进行类型转换。

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

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

或者通过将 props 的类型作为泛型传递给 DefineProps 来使用仅类型 prop 声明，而不是将 props 对象作为参数传递。

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

Answer 2

Nuxt3，设置，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
})

Answer 3

Vue3 (Vite)、设置、lang-ts

谢谢@Daniel，我必须从你的答案中扩充代码才能在我的环境中有效。

1. 导入类型而不是仅仅导入
2. 导出接口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
})