Vue3中defineProps类型式声明与PropType运行时声明的区别及选型疑问

嘿，这个问题问到点子上了！我来给你拆解清楚这俩玩意儿的区别，以及什么时候该用哪种~

首先得搞懂什么是运行时声明：你说得没错，TypeScript是静态类型检查，只在编译期干活，但Vue组件的Props其实还有运行时验证的需求——比如父组件传了不符合要求的参数，Vue会在浏览器控制台抛出警告，帮你快速定位问题，这就是运行时层面的作用。所谓的“runtime declaration”，就是指那种同时给Vue运行时环境提供验证规则的Props声明方式，它不只是给TS看的，还给Vue本身的运行逻辑用。

接下来对比两种方式的差异和适用场景：

1. 类型式声明（defineProps<{...}>） #

这种是Vue3配合TS推出的语法糖，完全是静态类型层面的操作：

• 写法超级简洁，直接用TS的接口、类型别名来定义Props结构，符合TS开发者的编码习惯，写起来贼快。
• 但它只有编译期的TS类型检查，不会生成任何运行时的Props验证代码。也就是说，你没法给Props加required、default、自定义validator这些规则——因为它本质只是个TS类型，没有运行时的逻辑载体。

举个你贴的例子：

<script setup lang="ts">
interface Book {
  title: string
  author: string
  year: number
}

const props = defineProps<{
  book: Book
}>()
</script>

这里的Book只是TS类型，Vue运行时根本不知道它存在，也不会做任何验证。

2. PropType运行时声明 #

这种是Vue传统Props声明方式的TS适配版，你定义的是一个运行时对象：

• 它不仅能让TS推断出Props的类型（靠PropType<Book>这个工具类型给TS做类型注解），还能给Vue运行时提供验证规则——比如设置required: true要求父组件必须传这个Props，或者给default设默认值，甚至写自定义的validator函数校验参数合法性。
• 简单说，这种方式是静态类型检查+运行时验证双管齐下。

还是用你的例子扩展下，就能看到运行时规则的作用：

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

interface Book {
  title: string
  author: string
  year: number
}

const props = defineProps({
  book: {
    type: Object as PropType<Book>,
    required: true,
    // 自定义运行时验证逻辑：年份必须大于1900
    validator: (value: Book) => {
      return value.year > 1900
    }
  }
})
</script>

这里的配置会在Vue运行时生效，如果父组件没传book，或者传的book.year小于等于1900，控制台就会弹出警告。

选型理由：什么时候用哪种？ #

• 如果你的组件是内部私有组件，比如项目里自己用的业务组件，你能确保父组件传的Props都是符合要求的，那优先用类型式声明——写法简洁，开发效率高。
• 如果你的组件是对外提供的公共组件（比如组件库、给其他团队用的组件），或者需要依赖运行时的验证规则（比如必须传某个Props、需要默认值、需要自定义校验逻辑），那必须用PropType的运行时声明——因为类型式声明满足不了这些运行时的需求。

备注：内容来源于stack exchange，提问作者dbzx10299