Vue3 中 PropType 的使用指南(示例详解)

import { defineComponent, PropType } from 'vue'
export default defineComponent({
  props: {
    // 基本类型
    title: String,
    count: Number,
    isActive: Boolean,
    // 使用 PropType 定义复杂类型
    user: Object as PropType<{ name: string; age: number }>,
    // 数组类型
    tags: Array as PropType<string[]>,
    // 函数类型
    onSubmit: Function as PropType<(data: any) => void>,
  }
})

import { defineComponent, PropType } from 'vue'
// 定义接口
interface User {
  id: number
  name: string
  email: string
}
// 定义类型
type Status = 'active' | 'inactive' | 'pending'
export default defineComponent({
  props: {
    // 使用接口
    user: {
      type: Object as PropType<User>,
      required: true
    },
    // 使用类型别名
    status: {
      type: String as PropType<Status>,
      default: 'pending'
    },
    // 嵌套对象
    config: {
      type: Object as PropType<{
        color: string
        size: 'sm' | 'md' | 'lg'
        enabled: boolean
      }>,
      default: () => ({})
    }
  }
})

props: {
  value: {
    type: [String, Number, Boolean] as PropType<string | number | boolean>,
    required: true
  }
}

interface Product {
  id: number
  name: string
  price: number
}
props: {
  // 对象数组
  products: {
    type: Array as PropType<Product[]>,
    default: () => []
  },
  // 复杂嵌套对象
  metadata: {
    type: Object as PropType<{
      pagination: {
        page: number
        limit: number
        total: number
      }
      filters: Record<string, any>
    }>,
    default: () => ({})
  }
}

props: {
  // 函数返回值
  getData: {
    type: Function as PropType<() => Promise<any[]>>,
    required: true
  },
  // 带参数的函数
  onSuccess: {
    type: Function as PropType<(result: any) => void>,
    default: () => {}
  },
  // 事件处理器
  onChange: {
    type: Function as PropType<(event: Event) => void>
  }
}

import { defineComponent, PropType, withDefaults } from 'vue'
interface Props {
  message?: string
  count?: number
  items?: string[]
}
export default defineComponent({
  props: withDefaults(defineProps<Props>(), {
    message: 'Hello',
    count: 0,
    items: () => []
  })
})

// types/user.ts
export interface User {
  id: number
  name: string
  role: 'admin' | 'user'
}
// UserProfile.vue
import { User } from '@/types/user'
props: {
  user: {
    type: Object as PropType<User>,
    required: true
  }
}

import { defineComponent, PropType } from 'vue'
export default defineComponent({
  props: {
    items: {
      type: Array as PropType<any[]>,
      default: () => []
    },
    itemKey: {
      type: String,
      default: 'id'
    }
  },
  setup(props) {
    // props.items 的类型是 any[]
  }
})

import { defineComponent, PropType, computed } from 'vue'
interface User {
  id: number
  name: string
}
export default defineComponent({
  props: {
    users: {
      type: Array as PropType<User[]>,
      default: () => []
    }
  },
  setup(props) {
    // TypeScript 能正确推断 props.users 的类型
    const userNames = computed(() => 
      props.users.map(user => user.name)
    )
    return { userNames }
  }
})

default: () => []  // ✅ 正确
default: []        // ❌ 错误（会共享引用）

props: {
  user: {
    type: Object as PropType<User>,  // User 应该没有 ? 可选标记
    required: true
  }
}

props: {
  score: {
    type: Number as PropType<number>,
    validator: (value: number) => {
      return value >= 0 && value <= 100
    }
  }
}