Vue组件Props和Emits应通过TypeScript类型驱动设计：Props用interface明确定义必传/可选字段及复杂类型；Emits用函数签名式约束事件参数；withDefaults仅适用于可选字段；defineExpose配合接口暴露可控方法。
为 Vue 组件的 Props 和 Emits 定义严谨接口，核心是用 TypeScript 的类型系统把“能传什么”和“能发什么”提前说清楚——不是写完再补类型，而是让类型驱动设计。
Props：用 interface 明确结构，必传/可选一目了然
别用 any 或模糊的 Object，直接定义具名接口。必传字段不加 ?，可选字段明确标注，联合类型、嵌套对象、函数类型都可直接表达：
- 基础字段：
name: string（必传）、count?: number（可选） - 状态枚举：
status: 'idle' | 'loading' | 'done' - 复杂对象：
user: { id: number; name: string; tags?: string[] }，或单独抽成interface User { ... } - 函数类型：
onConfirm?: (id: number) => void，IDE 能自动校验调用时参数是否匹配
声明时直接传入 defineProps<Props>()，无需运行时验证，编译阶段就报错。
Emits：用函数签名式定义，参数数量和类型全约束
字符串数组写法（defineEmits(['click', 'submit'])）没类型检查，只适合原型阶段。生产代码推荐函数签名形式：
立即学习“前端免费学习笔记（深入）”；
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 每个事件是一条函数签名：
(e: 'update:modelValue', value: string): void - 支持可选参数：
(e: 'change', data: FormData, extra?: { silent: boolean }) - 多个事件并列写在同一个对象里，支持重载：
{ (e: 'error', msg: string): void; (e: 'success', code: number): void }
这样写后，调用 emit('change') 时如果漏传 data，TS 立刻报错；传错类型（比如把 number 当 string）也立刻标红。
默认值与可选性必须匹配
withDefaults 只能给接口中标记为可选（带 ?）的字段设默认值。如果字段是必传的，设默认值会类型报错：
- ✅ 正确：
age?: number→withDefaults(defineProps<Props>(), { age: 18 }) - ❌ 错误：
name: string（必传）→ 不能在withDefaults里给它设默认值
默认值函数写法也要注意：数组/对象默认值必须用工厂函数，比如 items: () => []，避免引用共享。
配合 defineExpose 暴露可控 API
当父组件需要调用子组件方法（比如表单校验、手动聚焦），仅靠 Props/Emits 不够。用 defineExpose 显式暴露，同样走类型约束：
- 先定义接口：
interface PublicMethods { validate: () => boolean; reset: () => void } - 再暴露：
defineExpose<PublicMethods>({ validate, reset })
父组件拿到子组件 ref 后，IDE 可以精准提示可用方法，不会出现 ref.value.xxx is not a function 这类运行时错误。
