带有类型和 ComponentObjectPropsOptions 的 Vue 3 defineProps（如默认值或验证器）答案

【问题标题】：Vue 3 defineProps with Types and ComponentObjectPropsOptions (like default or validator)带有类型和 ComponentObjectPropsOptions 的 Vue 3 defineProps（如默认值或验证器）
【发布时间】：2022-06-21 05:07:56
【问题描述】：

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

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

这允许我在 props.tabs 上使用 Tab[] 类型

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

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

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

【问题讨论】：

标签： typescript vue.js

【解决方案1】：

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

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

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

【讨论】：

【解决方案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
})

【讨论】：