来自 TypeScript 类型的 Nuxt `defineProps`

Question

我将 Nuxt 3 / Vue 3defineProps与 TypeScript 结合使用，并希望从 TypeScript 类型推断 types prop 类型。

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

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

在此示例中，如何使usersprop 成为 的类型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}>()

您可以使用 helper 添加默认值withDefaults：

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