Vue 3 中 defineProps 类型声明有运行时和基于类型的两种方式，推荐使用泛型接口（如 defineProps）；需深度校验时用 PropType 显式标注，二者不可混用。
Vue 3 中配合 Composition API 使用 defineProps 做类型声明，核心就两条路：运行时声明（JS 风格）和基于类型的声明（TS 推荐）。后者更简洁、类型推导更强，也更符合现代 Vue + TypeScript 工程实践。
用泛型接口写 props 类型（最常用）
这是绝大多数项目首选方式。直接在 defineProps 中传入一个类型字面量或接口，TypeScript 编译器会自动推导出对应的运行时校验逻辑：
-
基础写法（类型字面量）：
<script setup lang="ts"><br>const props = defineProps<{<br> title: string<br> count?: number<br> disabled: boolean<br}>()<br></script> -
拆出 interface（适合复用或复杂结构）：
<script setup lang="ts"><br>interface CardProps {<br> id: number<br> title: string<br> tags?: string[]<br> meta?: { author: string; date: string }<br>}<br>const props = defineProps<CardProps>()<br></script>
带默认值的类型声明（withDefaults）
纯类型声明本身不支持默认值，必须搭配 withDefaults —— 它会在编译期把第二个参数转为运行时的 default 选项，同时保持类型安全：
<script setup lang="ts"><br>interface Props {<br> msg: string<br> title?: string<br> list: { id: number; name: string }[]<br>}<br>const props = withDefaults(defineProps<Props>(), {<br> title: '默认标题',<br> list: () => []<br>})<br></script>- 注意：函数式默认值（如
() => []）必须是箭头函数，且不能是内联对象字面量（比如{}），否则 TS 会报错。
需要深度类型校验？用 PropType
当 props 是自定义类、联合类型或需要精确控制构造函数/枚举等场景，就得借助 PropType 显式标注：
import { defineProps, PropType } from 'vue'<br>interface User { id: number; role: 'admin' | 'user' }<br>const props = defineProps({<br> user: { type: Object as PropType<User>, required: true },<br> status: { type: String as PropType<'pending' | 'done'>, default: 'pending' }<br>})- 这种写法保留了运行时校验能力（比如非 object 传入会警告），又让 IDE 和 TS 能精准识别内部字段类型。
别混用两种声明方式
运行时声明（对象传参）和基于类型的声明（泛型）不能共存于同一个 defineProps 调用中。选一种坚持到底：
- ✅ 可以：
defineProps()或defineProps({ a: String }) - ❌ 不可以：
defineProps({ a: String })—— 编译报错
