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.youkuaiyun.com/fghyibib/article/details/144209800?spm=1001.2014.3001.5502