vue 3 结合 typescript 定义 props 的核心是 defineprops 编译器宏，支持泛型接口（类型安全、零运行时开销）、withdefaults（设默认值需工厂函数防共享引用）、运行时配置对象（含 validator 和 required 校验），区别于 options api 的 this.props 和 prop 选项对象。
Vue 3 结合 TypeScript 定义 Props 的核心是 defineProps 编译器宏，它在 `<script setup>` 中直接声明、类型安全、零运行时开销。关键不在于“写法多”，而在于选对场景——简单传值用泛型接口，带默认值用 <code>withDefaults，需校验或复杂逻辑则用运行时配置对象。</script></p>
<h3>基础类型声明：用接口最清晰</h3>
<p>适合明确结构、强类型约束的场景。直接定义接口，TypeScript 自动推导 props 类型和响应式行为：</p>
<ul>
<li>在 `<script setup lang="ts">` 中声明接口，如 <code>interface ButtonProps { size?: 'sm' | 'md' | 'lg'; disabled?: boolean; onClick: () => void }</script>
</li>
<li>调用 <code>defineProps<buttonprops>()</buttonprops></code>，无需 import，编辑器立刻提示属性名和类型</li>
<li>可选属性自动标记为可选（如 <code>size?</code>），必填项缺失会触发 TS 编译报错</li>
</ul>
<h3>带默认值：配合 withDefaults 更可靠</h3>
<p>纯类型接口无法设默认值，必须搭配 <code>withDefaults</code> —— 它返回一个增强版 props，既保类型又保默认逻辑：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8402" title="Vue Composition Analyzer"><img
src="https://img.php.cn/upload/skill/000/000/081/179203693273105.jpg" alt="Vue Composition Analyzer" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill8402" title="Vue Composition Analyzer" class="overflowclass">Vue Composition Analyzer</a>
<p class="overflowclass">分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……</p>
</div>
<a rel="nofollow" href="/xiazai/skill8402" title="Vue Composition Analyzer" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul>
<li>先定义接口，例如 <code>interface ListProps { items: string[]; title?: string }</code>
</li>
<li>再用 <code>withDefaults(defineProps<listprops>(), { title: '列表标题', items: () => [] })</listprops></code>
</li>
<li>注意：对象/数组默认值必须是工厂函数（<code>() => []</code>），否则会共享引用</li>
</ul>
<h3>运行时校验：需要 validator 或 required 时才用对象写法</h3>
<p>当需动态校验（如枚举值判断）、或兼容非 TS 环境时，用运行时配置对象更灵活：</p>
<ul>
<li><code>defineProps({ status: { type: String as PropType, validator: v => ['success', 'error'].includes(v) } })</code></li>
<li>
<code>required: true</code> 显式声明必填，TS 不报错但 Vue 运行时会警告</li>
<li>基础类型如 <code>Number</code>、<code>String</code> 可直接写（非字符串字面量），但建议统一用 <code>PropType</code> 提升可读性</li>
</ul>
<h3>与 Options API 的区别要点</h3>
<p>不用 <code>this.props.xxx</code>，也不用 <code>props: { ... }</code> 选项对象。所有声明都在 `<script setup>` 顶层：</script>
- Options API 需
PropType辅助（如Object as PropType<user></user>），Composition API 直接写{ user: User } - 默认值设置方式不同：Options API 在 prop 对象里写
default，Composition API 用withDefaults或工厂函数 - 编译阶段处理，最终生成的 JS 不含
defineProps，体积更小，类型信息只用于开发期校验
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
