Vue3+TS开发实战：类型注解与Composition API最佳实践

1. 项目概述

在Vue3和TypeScript的组合开发中，类型系统与Composition API的完美结合是提升代码质量的关键。setup函数作为Composition API的核心入口，配合props、ref和reactive等响应式API，如何正确应用类型注解是每个Vue3+TS开发者必须掌握的实战技能。

我曾在一个电商后台管理系统的重构项目中，将原本Vue2+JS的代码迁移到Vue3+TS架构。过程中发现，合理的类型注解不仅能减少30%以上的运行时错误，还能显著提升代码的可维护性和开发体验。本文将分享我在实际项目中总结出的类型注解最佳实践。

2. 核心概念解析

2.1 setup函数的类型约束

setup是Composition API的入口函数，其类型定义直接影响组件内部的状态管理。在TS环境下，我们需要显式声明props和context参数的类型：

typescript复制import { defineComponent } from 'vue'

interface Props {
  id: number
  title: string
  status?: 'pending' | 'approved' | 'rejected'
}

export default defineComponent({
  setup(props: Props, context) {
    // 组件逻辑
  }
})

注意：context参数虽然可以不用显式类型注解，但其中的emit、attrs等属性仍可进一步类型化

2.2 props的类型声明演进

Vue3提供了多种props类型声明方式，各有适用场景：

1. 运行时声明（兼容Vue2）：

typescript复制props: {
  count: {
    type: Number,
    required: true,
    validator: (value: number) => value >= 0
  }
}

2. 基于泛型的类型声明（推荐）：

typescript复制const props = defineProps<{
  modelValue: string
  items?: Array<{ id: number; text: string }>
}>()

3. withDefaults辅助函数（带默认值）：

typescript复制interface Props {
  size?: 'small' | 'medium' | 'large'
  disabled?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  size: 'medium',
  disabled: false
})

3. 响应式API的类型注解

3.1 ref的类型处理

ref在TS中有两种类型声明方式：

typescript复制// 方式1：自动推断（简单类型）
const count = ref(0) // Ref<number>

// 方式2：显式泛型（复杂类型）
interface User {
  name: string
  age: number
}
const user = ref<User>({ name: '', age: 0 })

常见问题：

• 当ref初始值为null时需要明确联合类型：

typescript复制const data = ref<string | null>(null)

• 在setup返回时，ref会自动解包，无需额外类型声明

3.2 reactive的深度类型

reactive会对对象进行深度响应式转换，其类型声明需要注意：

typescript复制interface Sta