在掌握了 Vue 3 和 TypeScript 的基本使用后，你可以進(jìn)一步探索一些進(jìn)階特性和最佳實(shí)踐。這些包括更復(fù)雜的類(lèi)型定義、自定義 hooks、全局狀態(tài)管理等。下面是一些關(guān)鍵點(diǎn)：

1. 更復(fù)雜的類(lèi)型定義

Props 和 Emits 的類(lèi)型

對(duì)于組件的 props 和 emits，可以使用更精細(xì)的類(lèi)型來(lái)描述它們的行為。

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 };}
});

這里我們?yōu)?user prop 指定了具體的接口類(lèi)型，并且詳細(xì)地定義了 emits 的行為。

2. 自定義 Hooks

Hooks 是一種從函數(shù)組件中提取邏輯的方式，在 Vue 3 中通過(guò) Composition API 實(shí)現(xiàn)。創(chuàng)建可復(fù)用的邏輯塊可以幫助保持代碼的整潔和可維護(hù)性。

// 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;

然后在組件中使用這個(gè) 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. 全局狀態(tài)管理 - Pinia

Pinia 是一個(gè)輕量級(jí)的狀態(tài)管理庫(kù)，專(zhuān)為 Vue 3 設(shè)計(jì)。它與 TypeScript 集成良好，支持模塊化設(shè)計(jì)。

首先安裝 Pinia：

npm install pinia

然后創(chuàng)建一個(gè) 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 是專(zhuān)門(mén)為 Vue 3 設(shè)計(jì)的新一代 VS Code 插件，提供了比 Vetur 更好的 TypeScript 支持。確保你已經(jīng)安裝了 Volar 來(lái)獲得最佳開(kāi)發(fā)體驗(yàn)。

5. 類(lèi)型安全的路由

如果你使用 Vue Router，可以通過(guò)定義路由配置的類(lèi)型來(lái)增強(qiáng)類(lèi)型安全性。

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;

通過(guò)上述步驟，你可以充分利用 Vue 3 和 TypeScript 的強(qiáng)大功能，構(gòu)建出既高效又易于維護(hù)的應(yīng)用程序。

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