Vue SFC 中 TypeScript 定义 Props 的核心是 script setup + defineProps 宏，支持编译期检查与运行时校验；基础用接口或类型字面量，可选字段用?，默认值需 withDefaults，复杂类型须 PropType 显式标注。
在 Vue 单文件组件（SFC）中使用 TypeScript 定义 Props 类型，核心是配合 <script setup lang="ts"></script> 和 defineProps 宏。它能同时提供编译期类型检查和运行时校验，比纯 JavaScript 写法更安全、更智能。
基础写法：用接口或类型字面量声明
推荐直接在 defineProps 中传入一个 TypeScript 接口或对象类型字面量：
- 接口定义更清晰，适合复用或复杂结构
- 类型字面量适合简单、一次性 props
示例（接口方式）：
<script setup lang="ts"><br> interface ProductProps {<br> id: number;<br> title: string;<br> price?: number;<br> inStock: boolean;<br> }<br> const props = defineProps<ProductProps>();<br> </script>可选字段用 ? 标记，TypeScript 会自动识别是否必需。
立即学习“前端免费学习笔记（深入）”；
带默认值的 Props 类型定义
当使用泛型方式（如 defineProps<t>()</t>）时，不能直接在接口里写默认值。要用 withDefaults 包裹：
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
withDefaults 不仅设了默认值，还保留完整的类型推导 —— 编辑器能提示哪些字段有默认值，哪些仍需父组件传入。
处理复杂类型（数组、对象、联合类型）
遇到嵌套结构或多种可能类型，建议用 PropType 显式标注：
- 避免类型被擦除（比如
Array默认推导为any[]） - 支持泛型数组、对象属性约束、联合字面量等精细控制
示例：
import { PropType } from 'vue'<script setup lang="ts"><br> const props = defineProps({<br> tags: {<br> type: Array as PropType<string[]>,<br> default: () => []<br> },<br> status: {<br> type: String as PropType<'draft' | 'published' | 'archived'>,<br> required: true<br> },<br> meta: {<br> type: Object as PropType<{ author: string; publishedAt: Date }>,<br> default: () => ({ author: '', publishedAt: new Date() })<br> }<br> });<br> </script>
不使用 script setup 时的写法
如果组件没用 <script setup></script>，而是传统 Options API，需配合 defineComponent 和 props 选项：
此时 props 的类型由 Vue 自动从选项中推导，无需手动泛型，但必须用 defineComponent 包裹才能启用完整类型支持。
