Vue 3 + TypeScript进阶用法

在掌握了 Vue 3 和 TypeScript 的基本使用后，你可以进一步探索一些进阶特性和最佳实践。这些包括更复杂的类型定义、自定义 hooks、全局状态管理等。下面是一些关键点：

1. 更复杂的类型定义

Props 和 Emits 的类型

对于组件的 props 和 emits，可以使用更精细的类型来描述它们的行为。

import { defineComponent, PropType } from 'vue';interface User {id: number;name: string;
}export default defineComponent({props: {user: {type: Object as PropType<User>,required: true}},emits: {(event: 'update:user', payload: User): boolean => true,(event: 'deleteUser'): boolean => true},setup(props, { emit }) {const handleUpdate = (newUser: User) => {emit('update:user', newUser);};return { handleUpdate };}
});

这里我们为 user prop 指定了具体的接口类型，并且详细地定义了 emits 的行为。

2. 自定义 Hooks

Hooks 是一种从函数组件中提取逻辑的方式，在 Vue 3 中通过 Composition API 实现。创建可复用的逻辑块可以帮助保持代码的整洁和可维护性。

// useFetch.ts
import { ref, onMounted, onUnmounted } from 'vue';
import axios from 'axios';function useFetch<T>(url: string) {const data = ref<T | null>(null);const error = ref<Error | null>(null);const loading = ref(true);function fetchData() {loading.value = true;axios.get(url).then(response => {data.value = response.data;}).catch(err => {error.value = err;}).finally(() => {loading.value = false;});}onMounted(fetchData);onUnmounted(() => {// 清理操作});return { data, error, loading, fetchData };
}export default useFetch;

然后在组件中使用这个 hook：

import { defineComponent } from 'vue';
import useFetch from './useFetch';interface Post {id: number;title: string;
}export default defineComponent({setup() {const { data, error, loading, fetchData } = useFetch<Post>('https://jsonplaceholder.typicode.com/posts/1');return { data, error, loading, fetchData };}
});

3. 全局状态管理 - Pinia

Pinia 是一个轻量级的状态管理库，专为 Vue 3 设计。它与 TypeScript 集成良好，支持模块化设计。

首先安装 Pinia：

npm install pinia

然后创建一个 store：

// stores/userStore.ts
import { defineStore } from 'pinia';interface UserState {id: number;name: string;
}export const useUserStore = defineStore('user', {state: (): UserState => ({id: 0,name: ''}),actions: {setUser(user: UserState) {this.$patch(user);}}
});

在组件中使用 store：

import { defineComponent } from 'vue';
import { useUserStore } from '@/stores/userStore';export default defineComponent({setup() {const userStore = useUserStore();return { userStore };}
});

4. 使用 Volar 插件

Volar 是专门为 Vue 3 设计的新一代 VS Code 插件，提供了比 Vetur 更好的 TypeScript 支持。确保你已经安装了 Volar 来获得最佳开发体验。

5. 类型安全的路由

如果你使用 Vue Router，可以通过定义路由配置的类型来增强类型安全性。

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import Home from '../views/Home.vue';const routes: Array<RouteRecordRaw> = [{path: '/',name: 'Home',component: Home},// 更多路由...
];const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes
});export default router;

通过上述步骤，你可以充分利用 Vue 3 和 TypeScript 的强大功能，构建出既高效又易于维护的应用程序。

Vue 3 + TypeScript 高阶用法 https://blog.csdn.net/fghyibib/article/details/144209800?spm=1001.2014.3001.5502