来自 TypeScript 类型的 Nuxt `defineProps`

Question

我正在将 Nuxt 3 / Vue 3

defineProps

与 TypeScript 结合使用，并希望从 TypeScript 类型推断 types prop 类型。

import { User } from '~/types/types'

const props = defineProps({
  users: {
    type: Array, // User[]?
  },
})

在此示例中，如何使

users

属性成为

User[]

类型？

Answer 1

使用Vue的

PropType

import { PropType } from 'vue'
import { User } from '~/types/types'

const props = defineProps = ({
  users: {
    type: Array as PropType<User[]>
  },
})

Answer 2

您还可以使用纯类型语法：

import { User } from '~/types/types'

const props = defineProps<{users:User[], title:string}>()

您可以使用

withDefaults

助手添加默认值：

const props = withDefaults(defineProps<{users:User[], title:string}>(),{
   users:()=>[],// in arrays and object use factory function to return the value
   title:''
})