typescript 中为可选 props 设置兜底应使用 withdefaults + 接口声明:接口用 ? 标记可选属性,withdefaults 注入默认值使类型变为非联合类型;基础类型直接写字面量,引用类型须用工厂函数避免共享状态;兜底值需符合业务语义,避免魔法数字和不合理默认;不推荐 defaultprops 或运行时 default。

在 TypeScript 中为可选 Props 设置合理兜底,核心是让“可选”不等于“不可靠”——既要保持调用灵活性,又要确保组件内部能安全使用。关键不在是否传值,而在值缺失时系统能否自动提供一个类型正确、语义合理、内存安全的默认值。
用 withDefaults + 接口声明 替代运行时对象写法
这是 Vue 3 官方推荐、TypeScript 体验最干净的方式。先定义接口明确哪些是可选,再用 withDefaults 统一注入兜底值:
- 定义接口时用
?标记可选属性(如title?: string),表示该字段可不传 - 调用
withDefaults(defineProps<props>(), { ... })</props>,把兜底值写在第二个参数对象里 - 此时
props.title类型就是string(不是string | undefined),组件内可直接使用,无需判空
基础类型和引用类型兜底要区分写法
默认值写法错误会导致多实例共享状态或类型推导失效:
完整的Galileo AI平台 TypeScript/JS SDK 参考,用于评估、观察和保护 GenAI 应用。适用于构建 Node.js 或 TypeScript 项目。
- 字符串、数字、布尔值等基础类型:直接写字面量,如
count: 0、enabled: true - 对象、数组等引用类型:必须用函数返回新实例,如
config: () => ({ timeout: 3000 })、items: () => [],避免多个组件实例意外修改同一份内存
兜底值要符合业务语义,不能只图类型通过
类型正确只是底线,真正影响体验的是值是否合理:
- 不要给
email?: string设默认值''就完事——如果业务逻辑中空字符串和未传入需要不同处理,那就该保留undefined,改用computed合并判断 - 对布尔类可选项(如
showHeader?: boolean),兜底值优先选false,除非组件设计上“显示”才是无感默认行为 - 数值类兜底避免魔法数字,比如分页组件的
pageSize?: number,设为10比1更贴近真实场景
不建议混用 defaultProps 或运行时 default 函数
尤其在 Vue 3 + TS 项目中:
-
defineProps({ title: { type: String, default: '暂无标题' } })写法需搭配PropType断言,TS 类型信息弱,IDE 补全差 - React 风格的
Component.defaultProps在 Vue 中不适用,且 TypeScript 无法校验其与接口的一致性,容易漏改、错配 - 所有兜底逻辑集中到
withDefaults一处,接口变更时只需改一个地方,维护成本低










