一、Vue 3 中如何支持 TypeScript？

1.项目初始化与配置

npm create vue@latest
# 在初始化选项中勾选 TypeScript 支持

或手动配置 tsconfig.json 文件，确保包含以下关键配置：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "strict": true,          // 开启严格类型检查
    "jsx": "preserve",       // 支持 TSX（可选）
    "moduleResolution": "node",
    "esModuleInterop": true,
    "types": ["vite/client"] // 根据构建工具调整
  }
}

2.组件中直接使用 TS

Vue 3 的单文件组件（SFC）通过 <script lang="ts"> 声明使用 TS：

<script setup lang="ts">
// 直接编写 TypeScript 代码
import { ref } from 'vue'

// 类型明确的响应式变量
const count = ref<number>(0)
const message = ref<string>('Hello Vue 3 + TS!')
</script>

3.Props 的类型检查

通过 泛型接口 或 类型字面量 定义 Props 类型：

<script setup lang="ts">
interface Props {
  title: string
  count?: number
  isActive: boolean
}

const props = defineProps<Props>()
</script>

4.组合式 API 的 TS 支持

Vue 3 的 Composition API 天然支持 TS，例如：

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

export function useCounter(initial: number) {
  const count = ref(initial)
  const double = computed(() => count.value * 2)
  return { count, double }
}

5.泛型组件与复杂类型

泛型组件：通过 generic 属性支持泛型（Vue 3.3+）：

<script setup lang="ts" generic="T extends string | number">
defineProps<{
  items: T[]
  selected: T
}>()
</script>

6.类型声明文件支持

Vue 3 官方提供完整的 .d.ts 类型声明（如 vue-router、pinia 等均内置 TS 支持），无需额外安装类型包。

二、深度作用与核心优势

1.类型安全与错误预防

• 编译时类型检查：TS 在编译阶段捕获类型错误（如未定义的变量、错误的 Props 类型），避免低级错误进入运行时。
• 代码智能提示：IDE（如 VSCode）能基于类型推导提供精准的代码补全和文档提示，显著提升开发效率。

2.复杂场景的可维护性

• 大型项目协作：明确的接口（interface）和类型定义，使团队协作更规范，降低沟通成本。
• 重构友好性：修改代码时，TS 会标记所有受影响的位置，避免遗漏。

3.Vue 生态的深度集成

响应式变量类型推断：ref() 和 reactive() 自动推断类型：

const user = reactive({
  name: 'Alice',
  age: 25,
}) // 自动推导为 { name: string; age: number }

路由与状态管理的 TS 支持：

// Vue Router
const router = useRouter()
router.push('/path') // 路径类型检查

// Pinia
export const useStore = defineStore('id', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++ // 类型安全的 this 访问
    },
  },
})

4.自定义类型与工具类型

自定义工具类型：利用 TS 的高级类型（如 Utility Types）简化复杂逻辑：

type PartialUser = Partial<User> // 所有属性变为可选
type ReadonlyProps = Readonly<Props> // 只读 Props

事件类型安全：自定义事件类型提示

const emit = defineEmits<{
  (e: 'update', value: number): void
  (e: 'submit', payload: UserData): void
}>()

三、实际应用场景与示例

1.类型安全的 API 请求

interface User {
  id: number
  name: string
  email: string
}

async function fetchUser(id: number): Promise<User> {
  const response = await fetch(`/api/users/${id}`)
  return response.json() // 自动校验返回数据类型
}

2.复杂 Props 校验

<script setup lang="ts">
interface Product {
  id: number
  name: string
  price: number
}

defineProps<{
  product: Product
  discount?: number
  onAddToCart: (product: Product) => void
}>()
</script>

3.类型安全的插槽与作用域插槽

<!-- Parent.vue -->
<template>
  <Child>
    <template #header="{ title }">
      <!-- title 类型为 string -->
      <h1>{{ title }}</h1>
    </template>
  </Child>
</template>

<!-- Child.vue -->
<script setup lang="ts">
defineSlots<{
  header(props: { title: string }): any
}>()
</script>

Vue 3 与 TypeScript 的深度结合，不仅解决了大型应用的维护难题，还通过类型系统提升了开发体验和代码质量。核心优势体现在：

• 开发效率：智能提示 + 类型检查 = 更少调试时间。
• 代码健壮性：编译时错误拦截，减少线上 Bug。
• 团队协作：类型即文档，降低沟通成本。
• 生态兼容：Vue 全家桶（Router、Pinia）原生 TS 支持。

对于追求工程化、长期维护的项目，Vue 3 + TypeScript 是当前前端开发的最佳实践组合。