Vue3 + TypeScript 高级进阶与最佳实践

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

import { ref, reactive, computed } from 'vue';

// 自动类型推导
const count = ref(0); // Ref<number>
const user = reactive({ name: 'Alice', age: 25 }); // { name: string, age: number }

// 计算属性自动推导返回类型
const fullName = computed(() => {
  const firstName = ref('John');
  const lastName = ref('Doe');
  return `${firstName.value} ${lastName.value}`; // Ref<string>
});

// 函数参数类型推导
function useCounter(initialCount = 0) {
  const count = ref(initialCount);
  
  function increment(step = 1) {
    count.value += step;
  }
  
  return { count, increment };
}

const { count, increment } = useCounter(10);
// count: Ref<number>
// increment: (step?: number) => void

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

// src/types/vue.d.ts
import 'vue';

// 扩展全局属性
declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $translate: (key: string) => string;
    $auth: {
      isAuthenticated: boolean;
      login: (credentials: any) => Promise<void>;
      logout: () => void;
    };
    $dateFormat: (date: Date | string) => string;
  }
}

export {}

// 使用示例
import { defineComponent } from 'vue';

export default defineComponent({
  mounted() {
    // 类型安全，有完整的代码提示
    this.$translate('hello');
    this.$auth.login({ username: 'admin', password: '123456' });
    this.$dateFormat(new Date());
  }
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

// 递归类型定义嵌套树形结构
interface TreeNode<T = any> {
  id: string;
  label: string;
  data?: T;
  children?: TreeNode<T>[];
  expanded?: boolean;
  loading?: boolean;
  disabled?: boolean;
}

// 使用递归类型
const treeData: TreeNode<{ value: number }> = {
  id: '1',
  label: '根节点',
  data: { value: 100 },
  children: [
    {
      id: '2',
      label: '子节点 1',
      data: { value: 50 },
      children: [
        {
          id: '3',
          label: '子节点 1-1',
          data: { value: 25 }
        }
      ]
    }
  ]
};

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

// 定义表单字段类型
interface FormFields {
  name: string;
  age: number;
  email: string;
  active: boolean;
}

// 创建验证规则映射类型
type ValidationRules<T> = {
  [K in keyof T]: {
    required?: boolean;
    message?: string;
    validator?: (value: T[K]) => boolean;
  }[];
};

// 使用映射类型创建验证规则
const rules: ValidationRules<FormFields> = {
  name: [
    { required: true, message: '姓名不能为空' },
    { validator: (v) => v.length >= 2, message: '姓名长度至少为2个字符' }
  ],
  age: [
    { required: true, message: '年龄不能为空' },
    { validator: (v) => v >= 18 && v <= 100, message: '年龄必须在18-100之间' }
  ],
  email: [
    { required: true, message: '邮箱不能为空' },
    { 
      validator: (v) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v), 
      message: '请输入有效的邮箱地址' 
    }
  ],
  active: []
};

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

import { defineComponent, PropType } from 'vue';

// 基础按钮组件
const BaseButton = defineComponent({
  props: {
    variant: {
      type: String as PropType<'primary' | 'secondary' | 'danger'>,
      default: 'primary'
    },
    size: {
      type: String as PropType<'small' | 'medium' | 'large'>,
      default: 'medium'
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  setup(props, { slots }) {
    return () => (
      <button
        class={`btn btn-${props.variant} btn-${props.size}`}
        disabled={props.disabled}
      >
        {slots.default ? slots.default() : ''}
      </button>
    );
  }
});

// 继承并扩展基础按钮
const IconButton = defineComponent({
  extends: BaseButton,
  props: {
    icon: {
      type: String,
      required: true
    },
    iconPosition: {
      type: String as PropType<'left' | 'right'>,
      default: 'left'
    }
  },
  setup(props, { slots }) {
    // 获取基础按钮的渲染函数
    const baseRender = BaseButton.setup(props as any, { slots } as any);
    
    return () => {
      const iconEl = <i class={`icon icon-${props.icon}`}></i>;
      const defaultSlot = slots.default ? slots.default() : null;
      
      // 构建新的子节点，根据图标位置调整顺序
      const children = props.iconPosition === 'left'
        ? [iconEl, defaultSlot]
        : [defaultSlot, iconEl];
      
      // 使用基础按钮，但替换子内容
      return <BaseButton v-bind={props}>{children}</BaseButton>;
    };
  }
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

import { defineComponent, PropType, VNode, h } from 'vue';

// 使用 JSX/TSX 的函数式组件
interface TableColumnProps<T = any> {
  prop: keyof T;
  label: string;
  width?: string | number;
  formatter?: (value: any, row: T) => string | VNode;
  align?: 'left' | 'center' | 'right';
  sortable?: boolean;
}

export const TableColumn = defineComponent({
  name: 'TableColumn',
  props: {
    prop: {
      type: String as unknown as PropType<keyof any>,
      required: true
    },
    label: {
      type: String,
      required: true
    },
    width: [String, Number],
    formatter: Function as PropType<(value: any, row: any) => string | VNode>,
    align: String as PropType<'left' | 'center' | 'right'>,
    sortable: Boolean
  },
  // 函数式组件不维护状态
  functional: true,
  render(_, { props, slots }) {
    return h('th', {
      style: {
        width: props.width,
        textAlign: props.align || 'left'
      },
      class: {
        'sortable': props.sortable
      }
    }, [
      slots.default ? slots.default() : props.label
    ]);
  }
});

// 使用示例
// <TableColumn prop="name" label="姓名" width="150" align="center" />

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

import { defineComponent, Component, PropType, h } from 'vue';

// 创建一个加载状态的高阶组件
function withLoading<P extends object>(
  WrappedComponent: Component<P>
) {
  return defineComponent({
    name: `WithLoading${WrappedComponent.name}`,
    props: {
      loading: {
        type: Boolean,
        default: false
      },
      loadingText: {
        type: String,
        default: '加载中...'
      },
      ...(WrappedComponent as any).props
    },
    setup(props: any, { slots, attrs }) {
      return () => {
        if (props.loading) {
          return h('div', { class: 'loading-container' }, [
            h('div', { class: 'loading-spinner' }),
            h('div', { class: 'loading-text' }, props.loadingText)
          ]);
        }
        
        // 传递原始属性和插槽给包装的组件
        return h(WrappedComponent, { ...attrs, ...props }, slots);
      };
    }
  });
}

// 使用示例
const UserProfileWithLoading = withLoading(UserProfile);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

<template>
  <div class="data-list">
    <div v-if="loading" class="loading">加载中...</div>
    <div v-else-if="items.length === 0" class="empty">暂无数据</div>
    <template v-else>
      <div v-for="item in items" :key="item.id" class="list-item">
        <slot name="item" v-bind="{ item, index: items.indexOf(item) }">
          <!-- 默认内容 -->
          <div class="default-item">{{ item.name }}</div>
        </slot>
      </div>
    </template>
    
    <!-- 工具栏插槽 -->
    <slot name="toolbar"></slot>
    
    <!-- 分页插槽 -->
    <slot name="pagination" v-bind="{ 
      current: pagination.current, 
      total: pagination.total,
      pageSize: pagination.pageSize 
    }"></slot>
  </div>
</template>

<script setup lang="ts">
import { defineComponent, PropType } from 'vue';

// 定义项目类型
interface ListItem<T = any> {
  id: string | number;
  name: string;
  [key: string]: T;
}

// 定义分页类型
interface Pagination {
  current: number;
  total: number;
  pageSize: number;
}

// 定义插槽类型
type DataListSlots<T> = {
  // 默认插槽
  default?: () => any;
  // 项目插槽
  item?: (scope: {
    item: ListItem<T>;
    index: number;
  }) => any;
  // 工具栏插槽
  toolbar?: () => any;
  // 分页插槽
  pagination?: (scope: Pagination) => any;
};

// 定义组件 Props
interface DataListProps<T> {
  items: ListItem<T>[];
  loading?: boolean;
  pagination?: Pagination;
}

// 使用泛型组件
const props = withDefaults(defineProps<DataListProps<any>>(), {
  loading: false,
  pagination: () => ({
    current: 1,
    total: 0,
    pageSize: 10
  })
});
</script>

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117

// src/stores/userStore.ts
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';

// 定义用户类型
interface User {
  id: string;
  username: string;
  email: string;
  role: 'admin' | 'user' | 'manager';
  permissions: string[];
  createdAt: string;
}

// 定义状态类型
interface UserState {
  currentUser: User | null;
  token: string | null;
  isLoading: boolean;
  error: string | null;
}

// 使用泛型定义 store
export const useUserStore = defineStore('user', () => {
  // 状态
  const currentUser = ref<User | null>(null);
  const token = ref<string | null>(null);
  const isLoading = ref(false);
  const error = ref<string | null>(null);

  // 计算属性
  const isAuthenticated = computed(() => !!token.value);
  const isAdmin = computed(() => currentUser.value?.role === 'admin');
  const isManager = computed(() => 
    currentUser.value?.role === 'admin' || currentUser.value?.role === 'manager'
  );
  const hasPermission = computed(() => (permission: string) => 
    currentUser.value?.permissions.includes(permission) || false
  );

  // 操作
  async function login(credentials: { email: string; password: string }) {
    isLoading.value = true;
    error.value = null;
    
    try {
      // 模拟 API 调用
      // const response = await authService.login(credentials);
      
      // 模拟成功响应
      const mockResponse = {
        token: 'mock-jwt-token',
        user: {
          id: '1',
          username: 'admin',
          email: 'admin@example.com',
          role: 'admin',
          permissions: ['user:read', 'user:write', 'admin:read'],
          createdAt: new Date().toISOString()
        }
      };
      
      token.value = mockResponse.token;
      currentUser.value = mockResponse.user;
      
      // 保存到本地存储
      localStorage.setItem('token', mockResponse.token);
      localStorage.setItem('user', JSON.stringify(mockResponse.user));
      
      return mockResponse;
    } catch (err: any) {
      error.value = err.message || '登录失败';
      throw err;
    } finally {
      isLoading.value = false;
    }
  }
  
  function logout() {
    token.value = null;
    currentUser.value = null;
    localStorage.removeItem('token');
    localStorage.removeItem('user');
  }
  
  function initialize() {
    const savedToken = localStorage.getItem('token');
    const savedUser = localStorage.getItem('user');
    
    if (savedToken && savedUser) {
      try {
        token.value = savedToken;
        currentUser.value = JSON.parse(savedUser);
      } catch (e) {
        console.error('Failed to parse saved user data:', e);
        logout();
      }
    }
  }

  return {
    // 状态
    currentUser,
    token,
    isLoading,
    error,
    // 计算属性
    isAuthenticated,
    isAdmin,
    isManager,
    hasPermission,
    // 操作
    login,
    logout,
    initialize
  };
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

// src/stores/index.ts
import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';

// 创建 pinia 实例
const pinia = createPinia();

// 使用持久化插件
pinia.use(piniaPluginPersistedstate);

// 全局插件：添加状态变更日志
pinia.use(({ store }) => {
  const initialState = JSON.parse(JSON.stringify(store.$state));
  
  // 订阅状态变更
  store.$subscribe((mutation, state) => {
    console.log('状态变更:', {
      store: store.$id,
      type: mutation.type,
      payload: mutation.payload,
      oldState: initialState,
      newState: state
    });
  });
});

// 全局插件：添加错误处理
pinia.use(({ store }) => {
  store.$onAction(({ name, args, after, onError }) => {
    console.log(`执行动作: ${name}`, args);
    
    // 错误处理
    onError((error) => {
      console.error(`动作 ${name} 执行失败:`, error);
      // 可以在这里添加错误报告逻辑
    });
    
    // 动作执行后
    after((result) => {
      console.log(`动作 ${name} 执行成功`, result);
    });
  });
});

export default pinia;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

import { ref, reactive, computed, Ref } from 'vue';

// 推荐：使用接口定义数据结构
interface Product {
  id: string;
  name: string;
  price: number;
  inventory: number;
  isActive: boolean;
  categories: string[];
}

// 方法1：直接在 ref 中提供类型
const product1: Ref<Product | null> = ref(null);

// 方法2：使用泛型参数（推荐）
const product2 = ref<Product | null>(null);

// 方法3：使用 reactive
const product3 = reactive<Product>({
  id: '',
  name: '',
  price: 0,
  inventory: 0,
  isActive: false,
  categories: []
});

// 方法4：使用 as const 断言
const PRODUCT_STATUS = {
  ACTIVE: 'active',
  INACTIVE: 'inactive',
  PENDING: 'pending'
} as const;

type ProductStatus = typeof PRODUCT_STATUS[keyof typeof PRODUCT_STATUS];

// 计算属性的类型推断
const productPrice = ref(100);
const taxRate = ref(0.1);

// 自动推断为 Ref<number>
const priceWithTax = computed(() => {
  return productPrice.value * (1 + taxRate.value);
});

// 显式类型声明
const formattedPrice = computed<string>(() => {
  return `$${priceWithTax.value.toFixed(2)}`;
});

// 处理可能为 undefined 的值
function getProductName(product: Product | undefined | null): string {
  return product?.name || 'Unknown Product';
}

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149

// src/router/types.ts
export interface RouteMeta {
  title?: string;
  requiresAuth?: boolean;
  requiresAdmin?: boolean;
  permissions?: string[];
  breadcrumb?: string[];
  icon?: string;
  hidden?: boolean;
}

// 为 Vue Router 添加类型扩展
declare module 'vue-router' {
  interface RouteMeta extends RouteMeta {}
  
  // 扩展路由参数类型
  interface RouteParams {
    id?: string;
    userId?: string;
    productId?: string;
    categoryId?: string;
  }
}

// src/router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import { useUserStore } from '@/stores/userStore';

// 路由配置
const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'Layout',
    component: () => import('@/layout/index.vue'),
    meta: { requiresAuth: true },
    children: [
      {
        path: '',
        name: 'Dashboard',
        component: () => import('@/views/Dashboard.vue'),
        meta: {
          title: '仪表盘',
          icon: 'dashboard',
          breadcrumb: ['首页']
        }
      },
      {
        path: 'users',
        name: 'Users',
        component: () => import('@/views/users/List.vue'),
        meta: {
          title: '用户管理',
          icon: 'users',
          permissions: ['user:read'],
          breadcrumb: ['首页', '用户管理']
        }
      },
      {
        path: 'users/:id',
        name: 'UserDetail',
        component: () => import('@/views/users/Detail.vue'),
        props: true,
        meta: {
          title: '用户详情',
          permissions: ['user:read'],
          hidden: true,
          breadcrumb: ['首页', '用户管理', '用户详情']
        }
      }
    ]
  },
  {
    path: '/auth',
    name: 'Auth',
    component: () => import('@/views/auth/AuthLayout.vue'),
    meta: { requiresAuth: false },
    children: [
      {
        path: 'login',
        name: 'Login',
        component: () => import('@/views/auth/Login.vue'),
        meta: { title: '登录' }
      },
      {
        path: 'register',
        name: 'Register',
        component: () => import('@/views/auth/Register.vue'),
        meta: { title: '注册' }
      }
    ]
  },
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: () => import('@/views/NotFound.vue'),
    meta: { title: '404 - 页面未找到' }
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

// 导航守卫
router.beforeEach(async (to, from, next) => {
  const userStore = useUserStore();
  
  // 初始化用户状态
  if (!userStore.isInitialized) {
    userStore.initialize();
    userStore.isInitialized = true;
  }
  
  // 设置页面标题
  document.title = to.meta.title 
    ? `${to.meta.title} - 企业管理系统` 
    : '企业管理系统';
  
  // 权限检查
  if (to.meta.requiresAuth !== false && !userStore.isAuthenticated) {
    return next({ name: 'Login', query: { redirect: to.fullPath } });
  }
  
  // 已登录用户访问登录页
  if (['Login', 'Register'].includes(to.name as string) && userStore.isAuthenticated) {
    return next({ name: 'Dashboard' });
  }
  
  // 管理员权限检查
  if (to.meta.requiresAdmin && !userStore.isAdmin) {
    return next({ name: 'NotFound' });
  }
  
  // 权限列表检查
  if (to.meta.permissions && to.meta.permissions.length > 0) {
    const hasPermission = to.meta.permissions.some(permission => 
      userStore.hasPermission(permission)
    );
    
    if (!hasPermission) {
      return next({ name: 'NotFound' });
    }
  }
  
  next();
});

export default router;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

import { useRouter, useRoute } from 'vue-router';

// 类型安全的路由跳转
function navigateToUserDetail(userId: string) {
  const router = useRouter();
  
  // 类型安全的跳转，参数类型会被检查
  router.push({
    name: 'UserDetail',
    params: { id: userId }, // 这里会检查 id 参数
    query: { tab: 'profile' } // 查询参数类型也会被检查
  });
}

// 获取路由参数
function useCurrentRoute() {
  const route = useRoute();
  
  // 类型安全的参数获取
  const userId = route.params.userId as string;
  const productId = route.params.productId as string;
  const categoryId = route.params.categoryId as string;
  
  // 查询参数
  const searchQuery = route.query.q as string;
  const page = parseInt(route.query.page as string || '1');
  
  return {
    userId,
    productId,
    categoryId,
    searchQuery,
    page
  };
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

├── src/
│   ├── api/            # API 接口定义和实现
│   ├── assets/         # 静态资源
│   ├── components/     # 全局公共组件
│   ├── composables/    # 组合式函数
│   ├── constants/      # 常量定义
│   ├── directives/     # 自定义指令
│   ├── filters/        # 过滤器
│   ├── i18n/           # 国际化文件
│   ├── layout/         # 布局组件
│   ├── plugins/        # Vue 插件
│   ├── router/         # 路由配置
│   ├── stores/         # 状态管理
│   ├── types/          # TypeScript 类型定义
│   ├── utils/          # 工具函数
│   ├── views/          # 页面组件
│   ├── App.vue         # 根组件
│   └── main.ts         # 入口文件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// 组件命名规范
// 1. 基础组件: Base[ComponentName].vue
// 2. 业务组件: [Feature][ComponentName].vue
// 3. 页面组件: [PageName].vue

// 组件 Props 定义规范
interface ButtonProps {
  // 必选属性使用 required
  variant: 'primary' | 'secondary' | 'outline' | 'text';
  
  // 可选属性提供默认值
  size?: 'small' | 'medium' | 'large';
  disabled?: boolean;
  loading?: boolean;
  icon?: string;
  type?: 'button' | 'submit' | 'reset';
}

// 默认值规范
const props = withDefaults(defineProps<ButtonProps>(), {
  variant: 'primary',
  size: 'medium',
  disabled: false,
  loading: false
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

// src/types/index.ts - 主入口，导出所有类型
export * from './api';
export * from './common';
export * from './components';
export * from './models';
export * from './vue';

// src/types/common.ts - 通用类型定义
export interface PaginatedResponse<T> {
  data: T[];
  meta: {
    total: number;
    page: number;
    pageSize: number;
    totalPages: number;
  };
}

export interface ApiResponse<T = any> {
  success: boolean;
  data?: T;
  error?: {
    code: string;
    message: string;
    details?: any;
  };
}

// src/types/models.ts - 业务模型类型
export interface User {
  id: string;
  username: string;
  email: string;
  firstName: string;
  lastName: string;
  role: UserRole;
  permissions: string[];
  createdAt: string;
  updatedAt: string;
}

export type UserRole = 'admin' | 'manager' | 'user';

export interface Product {
  id: string;
  name: string;
  description: string;
  price: number;
  category: string;
  tags: string[];
  inventory: number;
  images: string[];
  isActive: boolean;
  createdAt: string;
  updatedAt: string;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

// tsconfig.json 优化配置
{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    
    // 模块解析
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    
    // 严格模式
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "forceConsistentCasingInFileNames": true,
    
    // 路径别名
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    
    // 类型根目录
    "typeRoots": ["node_modules/@types", "src/types"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ],
  "references": [{ "path": "./tsconfig.node.json" }]
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

<template>
  <div>
    <!-- 动态组件 -->
    <component :is="currentComponent" />
    
    <!-- 异步组件 -->
    <AsyncHeavyComponent />
  </div>
</template>

<script setup lang="ts">
import { defineAsyncComponent, computed } from 'vue';

// 动态导入组件
const HeavyComponentA = () => import('@/components/HeavyComponentA.vue');
const HeavyComponentB = () => import('@/components/HeavyComponentB.vue');

// 异步组件带选项
const AsyncHeavyComponent = defineAsyncComponent({
  // 加载函数
  loader: () => import('@/components/HeavyComponent.vue'),
  // 加载中显示的组件
  loadingComponent: () => import('@/components/Loading.vue'),
  // 加载失败显示的组件
  errorComponent: () => import('@/components/Error.vue'),
  // 延迟时间（毫秒）
  delay: 200,
  // 超时时间（毫秒）
  timeout: 3000,
  // 错误处理
  onError(error, retry, fail, attempts) {
    if (error.message.match(/fetch/) && attempts <= 3) {
      // 重试加载
      retry();
    } else {
      fail();
    }
  }
});

// 根据条件切换组件
const componentType = 'A';
const currentComponent = computed(() => {
  return componentType === 'A' ? HeavyComponentA : HeavyComponentB;
});
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<template>
  <div class="tab-container">
    <el-tabs v-model="activeTab" type="card">
      <el-tab-pane label="用户管理" name="users">
        <keep-alive :include="['UserList']">
          <UserList v-if="activeTab === 'users'" />
        </keep-alive>
      </el-tab-pane>
      <el-tab-pane label="产品管理" name="products">
        <keep-alive :include="['ProductList']">
          <ProductList v-if="activeTab === 'products'" />
        </keep-alive>
      </el-tab-pane>
      <el-tab-pane label="订单管理" name="orders">
        <keep-alive :include="['OrderList']">
          <OrderList v-if="activeTab === 'orders'" />
        </keep-alive>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import UserList from '@/views/users/List.vue';
import ProductList from '@/views/products/List.vue';
import OrderList from '@/views/orders/List.vue';

const activeTab = ref('users');

// 生命周期钩子
onMounted(() => {
  // 可以在这里执行初始化逻辑
});
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

// src/utils/debug.ts

/**
 * 日志装饰器 - 记录函数调用和返回值
 */
export function Log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  
  descriptor.value = function(...args: any[]) {
    console.log(`[${target.constructor.name}.${propertyKey}] 调用参数:`, args);
    
    const result = originalMethod.apply(this, args);
    
    // 处理 Promise 返回值
    if (result instanceof Promise) {
      return result.then(res => {
        console.log(`[${target.constructor.name}.${propertyKey}] 返回结果:`, res);
        return res;
      }).catch(err => {
        console.error(`[${target.constructor.name}.${propertyKey}] 错误:`, err);
        throw err;
      });
    }
    
    console.log(`[${target.constructor.name}.${propertyKey}] 返回结果:`, result);
    return result;
  };
  
  return descriptor;
}

/**
 * 性能监控装饰器 - 测量函数执行时间
 */
export function MeasurePerformance(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  
  descriptor.value = function(...args: any[]) {
    const startTime = performance.now();
    
    const result = originalMethod.apply(this, args);
    
    // 处理 Promise
    if (result instanceof Promise) {
      return result.then(res => {
        const endTime = performance.now();
        console.log(`[性能] ${target.constructor.name}.${propertyKey} 执行时间: ${(endTime - startTime).toFixed(2)}ms`);
        return res;
      });
    }
    
    const endTime = performance.now();
    console.log(`[性能] ${target.constructor.name}.${propertyKey} 执行时间: ${(endTime - startTime).toFixed(2)}ms`);
    return result;
  };
  
  return descriptor;
}

// 使用示例
class UserService {
  @Log
  @MeasurePerformance
  async fetchUsers(page = 1, limit = 10) {
    // 实现获取用户的逻辑
    return { users: [], total: 0 };
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

// 优化类型推断
function createUser<T extends { name: string, email: string }>(userData: T) {
  // ...
  return userData;
}

// 比 any 更安全的 unknown 类型
function processValue(value: unknown) {
  if (typeof value === 'string') {
    // TypeScript 会自动缩小类型范围
    return value.toUpperCase();
  }
  if (typeof value === 'number') {
    return value * 2;
  }
  if (Array.isArray(value)) {
    return value.length;
  }
  return null;
}

// 使用类型保护函数
function isUser(value: any): value is User {
  return (
    typeof value === 'object' &&
    value !== null &&
    'id' in value &&
    'username' in value &&
    'email' in value
  );
}

function handleResponse(response: any) {
  if (isUser(response)) {
    // 在这里 TypeScript 知道 response 是 User 类型
    console.log(response.username);
  }
}

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104

// src/composables/usePermission.ts
import { ref, computed, onMounted } from 'vue';
import { useUserStore } from '@/stores/userStore';
import { useRoute, useRouter } from 'vue-router';

// 权限检查组合式函数
export function usePermission() {
  const userStore = useUserStore();
  const route = useRoute();
  const router = useRouter();
  const isAuthorized = ref(true);
  
  // 检查当前用户是否有指定权限
  const hasPermission = computed(() => (permission: string) => {
    if (!userStore.currentUser) return false;
    return userStore.currentUser.permissions.includes(permission);
  });
  
  // 检查当前用户是否有指定角色
  const hasRole = computed(() => (role: string | string[]) => {
    if (!userStore.currentUser) return false;
    
    if (Array.isArray(role)) {
      return role.includes(userStore.currentUser.role);
    }
    return userStore.currentUser.role === role;
  });
  
  // 检查当前路由是否有权限访问
  const checkRoutePermission = () => {
    const requiredPermissions = route.meta.permissions;
    const requiresAdmin = route.meta.requiresAdmin;
    
    // 未登录用户，重定向到登录页
    if (route.meta.requiresAuth !== false && !userStore.isAuthenticated) {
      isAuthorized.value = false;
      router.push({
        name: 'Login',
        query: { redirect: route.fullPath }
      });
      return false;
    }
    
    // 需要管理员权限
    if (requiresAdmin && !hasRole.value('admin')) {
      isAuthorized.value = false;
      router.push({ name: 'AccessDenied' });
      return false;
    }
    
    // 检查权限列表
    if (requiredPermissions && requiredPermissions.length > 0) {
      const hasAccess = requiredPermissions.some(permission => 
        hasPermission.value(permission)
      );
      
      if (!hasAccess) {
        isAuthorized.value = false;
        router.push({ name: 'AccessDenied' });
        return false;
      }
    }
    
    isAuthorized.value = true;
    return true;
  };
  
  // 获取用户可以访问的菜单项
  const getAccessibleMenus = (menus: any[]) => {
    return menus.filter(menu => {
      // 检查是否隐藏
      if (menu.hidden) return false;
      
      // 检查权限
      if (menu.meta?.permissions && menu.meta.permissions.length > 0) {
        const hasAccess = menu.meta.permissions.some((permission: string) => 
          hasPermission.value(permission)
        );
        if (!hasAccess) return false;
      }
      
      // 检查子菜单
      if (menu.children && menu.children.length > 0) {
        menu.children = getAccessibleMenus(menu.children);
        // 如果没有子菜单且菜单项需要隐藏空菜单，则过滤掉
        return menu.children.length > 0 || !menu.meta?.hideEmptyChildren;
      }
      
      return true;
    });
  };
  
  onMounted(() => {
    checkRoutePermission();
  });
  
  return {
    isAuthorized,
    hasPermission,
    hasRole,
    checkRoutePermission,
    getAccessibleMenus
  };
}