如何推断Vue 3组件中的道具类型？

在Vue 3中，推断组件道具（props）的类型通常是通过使用TypeScript或者JavaScript的类型注解来实现的。以下是如何在Vue 3组件中定义和推断道具类型的几种方法：

使用TypeScript

如果你在使用TypeScript，可以直接在组件的props定义中指定类型：

<script setup lang="ts">
import { defineProps } from 'vue'

interface User {
  name: string;
  age: number;
}

const props = defineProps<{
  user: User;
  isActive: boolean;
}>()
</script>

<template>
  <div>
    <p>User name: {{ props.user.name }}</p>
    <p>User age: {{ props.user.age }}</p>
    <p>Is active: {{ props.isActive }}</p>
  </div>
</template>

使用JavaScript的类型注解

如果你在使用JavaScript，可以通过JSDoc注释来提供类型信息：

<script setup>
/**
 * @typedef {Object} User
 * @property {string} name - The user's name.
 * @property {number} age - The user's age.
 */

/**
 * @type {Object}
 * @property {User} user - The user object.
 * @property {boolean} isActive - Whether the user is active.
 */
const props = defineProps({
  user: Object,
  isActive: Boolean
})
</script>

<template>
  <div>
    <p>User name: {{ props.user.name }}</p>
    <p>User age: {{ props.user.age }}</p>
    <p>Is active: {{ props.isActive }}</p>
  </div>
</template>

使用Vue 3的PropType

Vue 3提供了一个PropType工具，可以在JavaScript中更明确地定义道具类型：

<script setup>
import { defineProps, PropType } from 'vue'

const props = defineProps({
  user: {
    type: Object as PropType<{ name: string; age: number }>,
    required: true
  },
  isActive: {
    type: Boolean,
    default: false
  }
})
</script>

<template>
  <!-- ... -->
</template>