以上用vue3+ts写法

### ### Vue 3 与 TypeScript 的结合实现方式 Vue 3 对 TypeScript 提供了原生支持，开发者可以通过使用 `script setup` 语法或传统的选项式 API 来实现类型安全和更好的开发体验。在 Vue 3 中结合 TypeScript，不仅可以提升代码的可维护性，还能增强组件之间的类型检查能力[^1]。 #### 使用 `script setup` 与 TypeScript Vue 3 的 `script setup` 语法为 TypeScript 提供了良好的集成体验，开发者可以在 `<script setup>` 中直接使用类型注解和泛型。例如，定义一个带有类型注解的响应式变量： ```vue <script setup lang="ts"> import { ref } from 'vue' const count = ref<number>(0) const increment = () => { count.value++ } </script> <template> <button @click="increment">Count: {{ count }}</button> </template> ``` 在该示例中，`count` 被明确指定为 `number` 类型，任何尝试赋值非数字类型的操作都会被 TypeScript 捕获。 #### 使用组合式 API 与自定义 Hook Vue 3 支持通过组合式 API 将逻辑复用逻辑封装为可重用的函数。例如，定义一个 `useSum` 函数来管理数值状态： ```ts // useSum.ts import { ref, onMounted } from 'vue' export default function useSum() { const sum = ref<number>(0) const increment = () => { sum.value += 1 } const decrement = () => { sum.value -= 1 } onMounted(() => { increment() }) return { sum, increment, decrement } } ``` 在组件中使用该 Hook： ```vue <script setup lang="ts"> import useSum from './useSum' const { sum, increment } = useSum() </script> <template> <div>当前总和：{{ sum }}</div> <button @click="increment">增加</button> </template> ``` 通过这种方式，可以将业务逻辑从组件中解耦，提高代码的复用性和可测试性[^2]。 #### 使用 Pinia 进行状态管理 在 Vue 3 + TypeScript 项目中，推荐使用 [Pinia](https://pinia.vuejs.org/) 替代 Vuex 作为状态管理方案，因为它对 TypeScript 的支持更加友好。定义一个 Pinia Store 并使用 TypeScript 注解类型： ```ts // stores/counterStore.ts import { defineStore } from 'pinia' export const useCounterStore = defineStore('counter', { state: () => ({ count: 0, }), actions: { increment() { this.count++ }, decrement() { this.count-- }, }, }) ``` 在组件中使用该 Store： ```vue <script setup lang="ts"> import { useCounterStore } from '@/stores/counterStore' const counter = useCounterStore() </script> <template> <div>当前计数：{{ counter.count }}</div> <button @click="counter.increment()">增加</button> </template> ``` Pinia 的类型推导能力可以确保状态和操作的类型安全，同时提供良好的开发体验[^3]。 #### 路由管理与 TypeScript Vue 3 推荐使用 Vue Router 4，它也提供了对 TypeScript 的良好支持。定义带有类型注解的路由配置： ```ts // router/index.ts import { createRouter, createWebHistory } from 'vue-router' import HomeView from '../views/HomeView.vue' const router = createRouter({ history: createWebHistory(), routes: [ { path: '/', name: 'home', component: HomeView, }, { path: '/about', name: 'about', component: () => import('../views/AboutView.vue'), }, ], }) export default router ``` 在组件中使用路由： ```vue <template> <nav> <router-link to="/">首页</router-link> <router-link to="/about">关于</router-link> </nav> <router-view /> </template> ``` 通过上述方式，可以在 Vue 3 项目中充分结合 TypeScript，提升代码的可读性、可维护性和类型安全性。 ---