Vue3 + TypeScript 组合式API实战技巧：从入门到项目实战
摘要：本文深入探讨 Vue3 组合式 API 配合 TypeScript 的开发技巧，涵盖类型推导、响应式系统、生命周期管理以及实战中的最佳实践，帮助你写出更健壮、可维护的 Vue3 代码。
关键词：Vue3, TypeScript, Composition API, 响应式, 类型推导, 前端开发
目录
- 前言
- 为什么选择 Vue3 + TypeScript
- 环境搭建与配置
- 组合式API核心技巧
- TypeScript 类型推导实战
- 实战案例：封装一个可复用的表格组件
- 性能优化技巧
- 总结
一、前言
Vue3 的发布带来了革命性的变化，其中最引人注目的就是Composition API（组合式 API）。相比 Options API，组合式 API 提供了更好的逻辑复用能力和类型推导支持。当配合TypeScript使用时，我们能获得更强大的类型检查和 IDE 智能提示。
本文将分享在实际项目中积累的 Vue3 + TypeScript 开发技巧，帮助你少走弯路。
二、为什么选择 Vue3 + TypeScript
2.1 优势对比
| 特性 | Vue2 + JS | Vue3 + TS |
|---|---|---|
| 类型安全 | 运行时才发现错误 | 编译期类型检查 |
| IDE支持 | 有限的代码提示 | 完整的智能提示和跳转 |
| 逻辑复用 | Mixins（命名冲突风险） | Composable（清晰明确） |
| 代码可维护性 | 依赖文档和注释 | 类型即文档 |
2.2 实际收益
在我参与的电商后台项目中，引入 TypeScript 后：
- Bug 减少约 40%（主要是类型错误和 undefined 错误）
- 代码审查时间缩短 30%
- 新人上手速度提升 50%
三、环境搭建与配置
3.1 创建项目
# 使用 create-vue 官方脚手架npmcreate vue@latest my-project# 选项选择# TypeScript? ... Yes# JSX Support? ... No# Vue Router? ... Yes# Pinia? ... Yes# ESLint? ... Yes3.2 tsconfig.json 关键配置
{"compilerOptions":{"target":"ESNext","module":"ESNext","moduleResolution":"bundler","strict":true,"jsx":"preserve","sourceMap":true,"resolveJsonModule":true,"isolatedModules":true,"esModuleInterop":true,"lib":["ESNext","DOM"],"skipLibCheck":true,"noEmit":true,"baseUrl":".","paths":{"@/*":["./src/*"]},"types":["vite/client","vue/ref-macros"]},"include":["src/**/*.ts","src/**/*.tsx","src/**/*.vue"]}四、组合式API核心技巧
4.1 ref 与 reactive 的正确选择
import{ref,reactive}from'vue'// 推荐：基础类型使用 refconstcount=ref<number>(0)constname=ref<string>('Vue3')constisActive=ref<boolean>(true)// 推荐：复杂对象/数组使用 reactiveconstuser=reactive<{name:stringage:numberhobbies:string[]}>({name:'张三',age:25,hobbies:['编程','阅读']})4.2 computed 的类型推导
import{ref,computed}from'vue'interfaceProduct{name:stringprice:numberquantity:number}constcart=ref<Product[]>([{name:'iPhone',price:6999,quantity:2},{name:'MacBook',price:12999,quantity:1}])// TypeScript 会自动推导返回类型为 numberconsttotalPrice=computed(()=>{returncart.value.reduce((sum,item)=>sum+item.price*item.quantity,0)})4.3 watch 的高级用法
import{ref,watch,watchEffect}from'vue'constsearchQuery=ref('')constsearchResults=ref<any[]>([])constloading=ref(false)// 监听多个源watch([searchQuery,loading],([newQuery,newLoading],[oldQuery])=>{console.log(`Query:${oldQuery}->${newQuery}, Loading:${newLoading}`)})// watchEffect（自动追踪依赖）watchEffect(async()=>{if(!searchQuery.value){searchResults.value=[]return}loading.value=truetry{constresponse=awaitfetch(`/api/search?q=${searchQuery.value}`)searchResults.value=awaitresponse.json()}finally{loading.value=false}})五、TypeScript 类型推导实战
5.1 Props 的类型定义
// 子组件：UserCard.vue<script setup lang="ts">// 定义用户接口interfaceUser{id:numbername:stringemail:stringavatar?:stringrole:'admin'|'user'|'guest'}// Props 类型定义constprops=defineProps<{user:User showEmail?:booleansize?:'small'|'medium'|'large'}>()// 带默认值的 propsconstpropsWithDefaults=withDefaults(defineProps<{user:User showEmail?:booleansize?:'small'|'medium'|'large'}>(),{showEmail:true,size:'medium'})</script>5.2 Emits 的类型安全
<script setup lang="ts">// 定义 emits 类型constemit=defineEmits<{(e:'update',id:number):void(e:'change',value:string,oldValue:string):void(e:'delete',id:number,reason?:string):void(e:'submit',data:{name:string;age:number}):void}>()consthandleClick=()=>{emit('update',123)// 正确}</script>六、实战案例：封装一个可复用的表格组件
6.1 类型定义
// types/table.tsexportinterfaceTableColumn<T=any>{key:keyofT|stringtitle:stringwidth?:numbersortable?:booleanformatter?:(row:T,index:number)=>stringslot?:string}exportinterfacePagination{page:numberpageSize:numbertotal:number}6.2 组件实现
<!-- components/DataTable.vue --> <script setup lang="ts" generic="T extends Record<string, any>"> import type { TableColumn, Pagination } from '@/types/table' const props = withDefaults( defineProps<{ data: T[] columns: TableColumn<T>[] loading?: boolean pagination?: Pagination }>(), { loading: false } ) const emit = defineEmits<{ (e: 'update:pagination', pagination: Pagination): void (e: 'row-click', row: T): void }>() </script> <template> <div class="data-table"> <table class="table"> <thead> <tr> <th v-for="col in columns" :key="col.key"> {{ col.title }} </th> </tr> </thead> <tbody> <tr v-for="row in data" :key="row.id"> <td v-for="col in columns" :key="col.key"> {{ row[col.key] }} </td> </tr> </tbody> </table> </div> </template>七、性能优化技巧
7.1 使用 shallowRef 减少开销
import{shallowRef,triggerRef}from'vue'// 对于大型对象，不需要深层响应式时使用 shallowRefconstlargeData=shallowRef({/* 巨大对象 */})// 需要更新视图时手动触发triggerRef(largeData)7.2 使用 markRaw 跳过响应式
import{markRaw}from'vue'import*asechartsfrom'echarts'// 第三方库实例不需要响应式constchartInstance=markRaw(echarts.init(dom))八、总结
Vue3 + TypeScript + 组合式 API 的组合为前端开发带来了：
- 更强的类型安全：编译期捕获错误，减少运行时 bug
- 更好的代码复用：Composables 让逻辑复用更清晰
- 更优的 IDE 支持：代码提示、重构、导航一气呵成
- 更易维护的代码：类型即文档，降低理解成本
关键要点回顾：
- 基础类型用 ref，复杂对象用 reactive
- 善用 defineProps 和 defineEmits 的类型定义
- 使用 InjectionKey 确保 Provide/Inject 类型安全
- 泛型组件 generic=“T” 实现真正的类型复用