Vue 单文件组件怎么使用 TypeScript 定义 Props 类型-Vue.js-PHP中文网

Vue SFC 中 TypeScript 定义 Props 的核心是 script setup + defineProps 宏，支持编译期检查与运行时校验；基础用接口或类型字面量，可选字段用?，默认值需 withDefaults，复杂类型须 PropType 显式标注。

vue 单文件组件怎么使用 typescript 定义 props 类型

在 Vue 单文件组件（SFC）中使用 TypeScript 定义 Props 类型，核心是配合 <script setup lang="ts"></script> 和 defineProps 宏。它能同时提供编译期类型检查和运行时校验，比纯 JavaScript 写法更安全、更智能。

基础写法：用接口或类型字面量声明

推荐直接在 defineProps 中传入一个 TypeScript 接口或对象类型字面量：

接口定义更清晰，适合复用或复杂结构
类型字面量适合简单、一次性 props

示例（接口方式）：

可选字段用 ? 标记，TypeScript 会自动识别是否必需。

带默认值的 Props 类型定义

当使用泛型方式（如 defineProps()）时，不能直接在接口里写默认值。要用 withDefaults 包裹：

withDefaults 不仅设了默认值，还保留完整的类型推导 —— 编辑器能提示哪些字段有默认值，哪些仍需父组件传入。

Element Plus UI Vue3

Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。

下载

处理复杂类型（数组、对象、联合类型）

遇到嵌套结构或多种可能类型，建议用 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>