Vue 3 与 TypeScript 高级应用

概述

TypeScript 是 JavaScript 的超集，为 JavaScript 添加了静态类型支持，能够在编译时发现错误，提高代码质量和可维护性。Vue 3 对 TypeScript 提供了更好的支持，包括组合式 API、组件类型推断等。本集将深入探讨 Vue 3 与 TypeScript 的高级应用，包括组件类型定义、Composables 类型安全、响应式 API 类型使用等。

核心知识点

1. TypeScript 基础回顾

TypeScript 的核心特性包括：

• 静态类型检查
• 接口和类型别名
• 泛型
• 枚举
• 命名空间和模块
• 类型推断
• 类型断言

2. Vue 3 项目中的 TypeScript 配置

基础配置

tsconfig.json：

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

tsconfig.node.json：

{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

3. 组件的 TypeScript 类型定义

Options API 类型定义

<template>
  <div>{{ message }}</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

interface Props {
  message?: string
}

export default defineComponent<Props>({
  props: {
    message: {
      type: String,
      default: 'Hello World'
    }
  },
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
})
</script>

Composition API 类型定义

<template>
  <div>{{ message }}</div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

interface Props {
  message?: string
}

const props = withDefaults(defineProps<Props>(), {
  message: 'Hello World'
})

const emit = defineEmits<{
  (e: 'update:message', value: string): void
  (e: 'click'): void
}>()

const count = ref(0)
const doubled = computed(() => count.value * 2)
</script>

4. Composables 的类型安全

创建类型安全的 Composables：

// composables/useCounter.ts
import { ref, computed, Ref } from 'vue'

interface UseCounterOptions {
  initialValue?: number
  step?: number
}

export function useCounter(options: UseCounterOptions = {}) {
  const { initialValue = 0, step = 1 } = options
  
  const count = ref(initialValue) as Ref<number>
  
  const increment = () => {
    count.value += step
  }
  
  const decrement = () => {
    count.value -= step
  }
  
  const reset = () => {
    count.value = initialValue
  }
  
  const doubled = computed(() => count.value * 2)
  
  return {
    count,
    increment,
    decrement,
    reset,
    doubled
  }
}

使用类型安全的 Composables：

<script setup lang="ts">
import { useCounter } from '@/composables/useCounter'

// 自动推断类型
const { count, increment, doubled } = useCounter({
  initialValue: 10,
  step: 2
})

// count: Ref<number>
// increment: () => void
// doubled: ComputedRef<number>
</script>

5. Props 和 Emits 的类型定义

Props 类型定义

<script setup lang="ts">
// 基础类型定义
const props = defineProps<{
  name: string
  age: number
  active?: boolean
  tags: string[]
  user: {
    id: number
    name: string
  }
}>()

// 带默认值的 Props
const propsWithDefaults = withDefaults(defineProps<{
  name: string
  age?: number
  active?: boolean
}>(), {
  age: 18,
  active: false
})

// 使用接口定义 Props
interface UserProps {
  name: string
  age?: number
}

const userProps = withDefaults(defineProps<UserProps>(), {
  age: 18
})
</script>

Emits 类型定义

<script setup lang="ts">
// 基础 Emits 定义
const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void
  (e: 'submit', formData: { name: string; age: number }): void
  (e: 'click'): void
}>()

// 使用类型别名
type CounterEmits = {
  (e: 'increment', value: number): void
  (e: 'decrement', value: number): void
}

const counterEmit = defineEmits<CounterEmits>()
</script>

6. 响应式 API 的类型使用

Ref 类型

import { ref, Ref } from 'vue'

// 自动推断类型
const count = ref(0) // Ref<number>
const name = ref('') // Ref<string>
const user = ref<{ name: string; age: number } | null>(null) // Ref<{ name: string; age: number } | null>

// 显式类型
const explicitCount: Ref<number> = ref(0)

Reactive 类型

import { reactive } from 'vue'

interface User {
  name: string
  age: number
  address: {
    city: string
    street: string
  }
}

// 自动推断类型
const user = reactive({
  name: 'John',
  age: 30,
  address: {
    city: 'New York',
    street: '123 Main St'
  }
}) // Reactive<User>

// 显式类型
const explicitUser = reactive<User>({
  name: 'John',
  age: 30,
  address: {
    city: 'New York',
    street: '123 Main St'
  }
})

Computed 类型

import { ref, computed } from 'vue'

const count = ref(0)

// 自动推断类型
const doubled = computed(() => count.value * 2) // ComputedRef<number>

// 显式类型
const explicitDoubled = computed<number>(() => count.value * 2)

7. 类型声明文件

创建类型声明文件：

// types/vue-shims.d.ts
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

// types/env.d.ts
declare module '@env' {
  export const API_URL: string
  export const APP_VERSION: string
}

// types/custom.d.ts
declare interface Window {
  __APP_CONFIG__: {
    apiUrl: string
    env: string
  }
}

8. 与第三方库集成

安装类型定义

# 安装 Vue Router 类型定义
npm install -D @types/vue-router

# 安装 Pinia 类型定义
npm install -D @types/pinia

使用类型安全的第三方库

// router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router

9. 高级类型技巧

条件类型

// 定义条件类型
type IsString<T> = T extends string ? true : false

// 使用条件类型
type A = IsString<string> // true
type B = IsString<number> // false

映射类型

// 定义映射类型
type Readonly<T> = {
  readonly [P in keyof T]: T[P]
}

interface User {
  name: string
  age: number
}

// 使用映射类型
type ReadonlyUser = Readonly<User>
// { readonly name: string; readonly age: number }

工具类型

// Partial: 将所有属性变为可选
type PartialUser = Partial<User>

// Required: 将所有属性变为必填
type RequiredUser = Required<User>

// Pick: 选择部分属性
type UserName = Pick<User, 'name'>

// Omit: 排除部分属性
type UserWithoutAge = Omit<User, 'age'>

// Exclude: 从联合类型中排除
 type NotString = Exclude<string | number | boolean, string>

// Extract: 从联合类型中提取
type OnlyString = Extract<string | number | boolean, string>

10. 组件模板中的类型推断

Vue 3 的 <script setup lang="ts"> 提供了更好的模板类型推断：

<template>
  <div>
    <h1>{{ user.name }}</h1>
    <p>{{ user.age }}</p>
    <!-- 自动推断 user.address.city 类型 -->
    <p>{{ user.address.city }}</p>
    <!-- 类型错误：user 没有不存在的属性 -->
    <p>{{ user.nonExistentProperty }}</p>
  </div>
</template>

<script setup lang="ts">
interface User {
  name: string
  age: number
  address: {
    city: string
    street: string
  }
}

const user = ref<User>({
  name: 'John',
  age: 30,
  address: {
    city: 'New York',
    street: '123 Main St'
  }
})
</script>

最佳实践

1. 渐进式类型化

• 从基础类型开始，逐步添加更复杂的类型
• 对于现有项目，使用 // @ts-nocheck 暂时跳过类型检查
• 使用 any 类型作为过渡，但尽快替换
• 定期审查和更新类型定义

2. 组件设计

• 使用 interface 或 type 定义组件 Props 和 Emits
• 为 Composables 提供完整的类型定义
• 使用 withDefaults 为 Props 提供默认值
• 避免在模板中使用复杂的类型断言

3. 类型安全

• 启用严格模式（strict: true）
• 使用 noUnusedLocals 和 noUnusedParameters 检查未使用的变量和参数
• 避免过度使用 any 类型
• 使用类型断言时要谨慎

4. 性能优化

• 避免在模板中使用复杂的类型计算
• 合理使用 as const 断言
• 避免在运行时进行类型检查
• 使用 shallowRef 和 shallowReactive 减少类型检查开销

5. 团队协作

• 统一类型定义规范
• 使用共享的类型库
• 定期审查类型定义
• 提供类型使用指南

常见问题与解决方案

1. 类型推断不准确

问题：Vue 3 无法准确推断组件模板中的类型。

解决方案：

• 确保使用 <script setup lang="ts">
• 为组件提供完整的 Props 类型定义
• 使用 defineProps 和 defineEmits 替代旧的 API
• 升级 Vue 3 和 TypeScript 版本

2. 第三方库缺少类型定义

问题：某些第三方库缺少 TypeScript 类型定义。

解决方案：

• 安装 @types/xxx 类型定义包
• 创建自定义类型声明文件
• 使用 // @ts-ignore 暂时忽略类型错误
• 考虑使用 any 类型作为过渡

3. 类型检查速度慢

问题：项目较大时，TypeScript 类型检查速度慢。

解决方案：

• 调整 tsconfig.json 配置
• 禁用不必要的严格检查
• 使用 --incremental 选项
• 升级 TypeScript 版本
• 使用 tsc --noEmit 替代 tsc

4. 与 Vue 2 类型定义冲突

问题：同时使用 Vue 2 和 Vue 3 类型定义时冲突。

解决方案：

• 确保只安装 Vue 3 相关的类型定义
• 调整 tsconfig.json 的 exclude 选项
• 使用 skipLibCheck: true

5. 响应式对象类型问题

问题：Reactive 对象的类型推断不准确。

解决方案：

• 为 Reactive 对象提供明确的类型定义
• 使用 as 类型断言
• 避免使用复杂的嵌套类型
• 考虑使用 Ref 替代 Reactive

进阶学习资源

1. 官方文档：

   • Vue 3 TypeScript 支持
   • TypeScript 官方文档
   • Vite TypeScript 配置

2. 书籍：

   • 《TypeScript 实战》
   • 《深入理解 TypeScript》
   • 《Vue 3 实战》

3. 视频教程：

   • TypeScript 从入门到精通
   • Vue 3 + TypeScript 高级应用
   • TypeScript 高级类型技巧

4. 社区资源：

   • TypeScript playground
   • Vue TypeScript 示例
   • TypeScript 社区

5. 工具：

   • TypeScript ESLint
   • TypeScript Language Service
   • TypeScript Compiler API

实践练习

练习1：配置 Vue 3 + TypeScript 项目

要求：

• 创建一个 Vue 3 + TypeScript 项目
• 配置 tsconfig.json 和 tsconfig.node.json
• 创建类型声明文件
• 配置 ESLint 和 Prettier
• 测试项目是否能正常编译

练习2：创建类型安全的组件

要求：

• 创建一个类型安全的组件
• 定义 Props 和 Emits 类型
• 使用 Composition API
• 确保模板类型推断正常
• 测试组件类型安全性

练习3：创建类型安全的 Composables

要求：

• 创建一个类型安全的 Composables
• 支持泛型
• 提供完整的类型定义
• 在组件中使用该 Composables
• 测试类型安全性

练习4：与第三方库集成

要求：

• 集成 Vue Router 和 Pinia
• 为第三方库创建类型定义
• 配置路由和状态管理
• 测试类型安全性

练习5：高级类型技巧

要求：

• 使用条件类型创建工具类型
• 使用映射类型转换类型
• 实现泛型函数
• 测试高级类型

总结

TypeScript 是 Vue 3 项目中强大的工具，能够提供更好的类型安全性和开发体验。通过本集的学习，你应该掌握了 Vue 3 与 TypeScript 的高级应用技巧，包括组件类型定义、Composables 类型安全、响应式 API 类型使用等。

在下一集中，我们将探讨 Vue 3 DevOps 和 CI/CD，敬请期待！