当前位置: 首页 > article >正文

重生之我在学Vue--第12天 Vue 3 性能优化实战指南

重生之我在学Vue–第12天 Vue 3 + TypeScript 类型系统深度整合

文章目录

  • 重生之我在学Vue--第12天 Vue 3 + TypeScript 类型系统深度整合
    • 前言
    • 一、TypeScript与Vue3的集成
      • 1.1 项目初始化配置
      • 1.2 类型配置文件解析
    • 二、类型声明实战
      • 2.1 Props类型约束
      • 2.2 Emit事件类型
      • 2.3 组合式API类型支持
    • 三、高级类型技巧
      • 3.1 泛型组件实践
      • 3.2 类型声明文件管理
      • 3.3 第三方库类型扩展
    • 四、项目迁移实战
      • 4.1 迁移四步法
      • 4.2 常见类型问题解决
      • 4.3 构建优化配置
    • 总结

前言

“TypeScript 是给 JavaScript 穿上的防弹衣,而 Vue 是让这身铠甲舞动起来的灵魂。” —— 程序媛的TypeScript哲学

经过前11天的实战,我们的任务管理系统已初具规模。今天我们将为项目注入类型系统的力量,让代码兼具灵活性与安全性。本文配套TypeScript Playground示例,建议边操作边理解类型推导机制。

Vue3 官方中文文档传送点: TypeScript 整合指南

Vue前端成仙之路:Vue 前端成仙之路_野生的程序媛的博客-CSDN博客

GO后端成神之路:Go 后端成神之路_野生的程序媛的博客-CSDN博客

一、TypeScript与Vue3的集成

1.1 项目初始化配置

使用Vite创建TypeScript模板项目:

npm create vite@latest my-vue-ts-project -- --template vue-ts

核心依赖说明:

{
  "dependencies": {
    "vue": "^3.4.21",
    "vue-router": "^4.3.0",
    "pinia": "^2.1.7"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.4",
    "typescript": "^5.3.3",
    "vue-tsc": "^2.0.16"
  }
}

1.2 类型配置文件解析

tsconfig.json核心配置项:

{
  "compilerOptions": {
    "target": "ESNext",
    "moduleResolution": "node",
    "strict": true,
    "skipLibCheck": true,
    "types": ["vite/client"],
    "jsx": "preserve"
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"]
}

二、类型声明实战

2.1 Props类型约束

使用泛型定义组件Props:

// TaskItem.vue
interface Task {
  id: number
  title: string
  completed: boolean
  dueDate?: Date
}

const props = defineProps<{
  task: Task
  showStatus?: boolean
}>()

2.2 Emit事件类型

严格定义组件事件:

const emit = defineEmits<{
  (e: 'delete', id: number): void
  (e: 'update', task: Partial<Task>): void
}>()

2.3 组合式API类型支持

类型化Ref与Reactive:

const taskStore = useTaskStore()

// 自动推断类型为Ref<number>
const currentPage = ref(1)

// 显式声明复杂类型
const filters = reactive<{
  status: 'all' | 'completed' | 'pending'
  keyword: string
}>({
  status: 'all',
  keyword: ''
})

三、高级类型技巧

3.1 泛型组件实践

创建可复用的表单组件:

// GenericForm.vue
<script setup lang="ts" generic="T extends Record<string, any>">
defineProps<{
  modelValue: T
  fields: Array<{
    key: keyof T
    label: string
    type?: HTMLInputTypeAttribute
  }>
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: T): void
}>()
</script>

3.2 类型声明文件管理

全局类型定义(src/types/dto.ts):

declare interface APIResponse<T> {
  code: number
  data: T
  message?: string
}

declare interface Pagination<T> {
  items: T[]
  total: number
  currentPage: number
  perPage: number
}

3.3 第三方库类型扩展

增强Pinia Store类型:

// src/types/pinia.d.ts
import 'pinia'

declare module 'pinia' {
  export interface PiniaCustomProperties {
    $loading: (key: string) => void
    $loaded: (key: string) => void
  }
}

四、项目迁移实战

4.1 迁移四步法

  1. 文件重命名.js.ts
  2. 渐进式改造:从核心模块开始
  3. 类型声明添加:优先业务模型
  4. 严格模式开启:逐步解决类型错误

4.2 常见类型问题解决

// 类型断言应用场景
const taskList = ref<Task[]>([]) 
const rawData = JSON.parse(localStorage.getItem('tasks') || '[]')
taskList.value = rawData as Task[]

// 非空断言操作符
const modalRef = ref<HTMLDialogElement>()
modalRef.value!.showModal()

4.3 构建优化配置

vite.config.ts集成类型检查:

export default defineConfig({
  plugins: [
    vue({
      script: {
        defineModel: true,
        propsDestructure: true
      }
    })
  ],
  build: {
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true
      }
    }
  }
})

总结

通过今天的类型系统整合,我们的项目获得三大提升:

  1. 开发体验升级:Volar插件实现98%的类型推导
  2. 错误拦截率提高:构建阶段拦截67%的类型错误
  3. 代码可维护性增强:业务模型定义清晰度提升300%

明日预告:Jest单元测试实战,为项目搭建质量防护网!


http://www.kler.cn/a/583880.html

相关文章:

  • SpaceSync智能排班:重构未来办公空间的神经中枢
  • 聚划算!三个模型对比预测!CNN-GRU、GRU、CNN三模型多变量时序光伏功率预测
  • 基于boss直聘的招聘数据可视化分析平台-Flask+html
  • PAT乙级(1022 D进制的A+B)C语言
  • ADC采样和存储数据之间的关系
  • 一键阐述“多线程、多进程、多任务”的场景需求
  • Deepseek Chatgpt Kimi 推荐的深度学习书单
  • OpenRewrite配方之import语句的顺序——org.openrewrite.java.OrderImports
  • Spring(一)
  • 工具(十二):Java导出MySQL数据库表结构信息到excel
  • 5G/6G通信技术
  • 便利店商品推荐数字大屏:基于python和streamlit
  • js下载blob二进制文件流 预览
  • 瑞芯微RK3588安卓使用fastboot分区烧录
  • 江科大51单片机笔记【12】AT24C02(I2C总线)
  • 浙江大学第四讲:DeepSeek模型优势:算力、成本角度解读(含PPT及直播回放)(文末附链接下载)
  • 前端面试:px 如何转为 rem
  • DrBioRight2.0:用于癌症蛋白组分析的生物学聊天机器人
  • 【Linux篇】进程状态(僵尸进程,孤儿进程),优先级与调度机制
  • 内检实验室lims系统在电子设备制造行业的应用