Vue 3 与 TypeScript 结合的核心价值在于类型驱动开发：泛型组件通过 generic="T" 实现真正通用，响应式 API 自动推导精确类型，defineEmits 以函数签名保障事件通信类型安全，官方工具类型如 ComponentPublicInstance 和 ExtractPropTypes 提升类型复用性与准确性。
Vue 3 与 TypeScript 的结合早已超越“能用”层面，真正价值体现在类型驱动的开发范式中——组件更可复用、逻辑更易抽离、协作更少歧义。关键不在写 TS，而在让 TS 主动参与架构设计。
泛型组件：让通用组件真正“通用”
多数封装失败的根源是类型硬编码。比如一个下拉选择器，若只支持 string 或 number，就丧失了复用价值。正确做法是用 <script setup generic="T"> 声明类型参数，并约束结构：
- 明确泛型边界：
generic="T extends { id: string | number; label: string }"，确保传入数据有最小契约 - Props 和 emits 类型自动继承泛型：
items: T[]、(e: 'change', value: T)，IDE 能精准提示字段 - 避免用
any或Record<string, unknown>替代泛型——它们看似灵活，实则放弃类型保护
响应式类型：别再手动写 .value
ref、computed、reactive 在 TS 下有明确返回类型，但常见误区是过度解构或忽略包装类型：
Json Schema Toolkit
下载
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
-
const count = ref(0)推导为Ref<number>，访问时必须用count.value；若需自动解包（如模板中），用shallowRef或toRef更合适 -
const list = reactive([{ id: 1, name: 'a' }])类型是Reactive<{ id: number; name: string }[]>，数组方法返回值仍保持响应式，无需额外处理 - 对 API 返回数据做类型断言时，优先用
as const或satisfies（TS 4.9+），而非强制as，避免类型污染
事件与通信：类型安全的父子交互
defineEmits 不只是声明事件名，更是定义事件签名的契约：
立即学习“前端免费学习笔记（深入）”；
- 使用联合类型定义多事件：
defineEmits<{ (e: 'submit', data: Form): void; (e: 'cancel'): void }>() - 配合 defineProps 的泛型，实现 props-emits 的联动校验：比如
modelValue类型和update:modelValue的 payload 类型自动一致 - 避免在 emits 中只写字符串数组（
['change']），那样会丢失 payload 类型信息，TS 无法检查调用方传参是否合法
工具类型：用 Vue 提供的类型增强表达力
Vue 官方导出大量实用工具类型，比手写更准确、更兼容：
-
ComponentPublicInstance：获取组件实例类型，用于ref绑定后的类型推导 -
ExtractPropTypes：从 defineProps 参数中提取 Props 类型，避免重复定义接口 -
RouterLinkProps、UseRouteReturn等来自 vue-router 的类型，直接用于路由相关逻辑，不依赖 any - 自定义 Hook 返回值务必标注类型，例如
useFetch<User[]>()，让调用方清楚知道返回什么
