TypeScript 5 新特性解析：const 泛型、装饰器与最佳实践

一、前言TypeScript 5 新特性解析const 泛型、装饰器与最佳实践是 TypeScript 进阶的必学内容。掌握这些技巧能让你的代码类型安全程度提升数倍减少大量运行时 bug。二、泛型基础与进阶2.1 泛型约束// 基础泛型 function getPropertyT, K extends keyof T(obj: T, key: K): T[K] { return obj[key]; } const user { name: 张三, age: 30, id: 1 }; const name getProperty(user, name); // string ✅ const age getProperty(user, age); // number ✅ const id getProperty(user, id); // number ✅2.2 条件类型// 条件类型根据输入决定输出类型 type NonNullableT T extends null | undefined ? never : T; type FlattenT T extends Arrayinfer U ? U : T; type A Flattenstring[]; // string type B Flattennumber; // number // 实用场景提取函数返回类型 type ReturnTypeT T extends (...args: any[]) infer R ? R : never; function fetchUser(): Promise{ name: string; age: number } { return Promise.resolve({ name: 张三, age: 30 }); } type User AwaitedReturnTypetypeof fetchUser; // { name: string; age: number }2.3 映射类型// 将所有属性变为只读 type ReadonlyT { readonly [P in keyof T]: T[P]; }; // 将所有属性变为可选 type PartialT { [P in keyof T]?: T[P]; }; // 实用示例只保留特定字段 type PickT, K extends keyof T { [P in K]: T[P]; }; type User { id: number; name: string; email: string; age: number }; type UserPreview PickUser, id | name; // { id: number; name: string }三、装饰器实战3.1 类装饰器// 简单日志装饰器 function logClass(target: new (...args: any[]) any) { const original target; function constructor(...args: any[]) { console.log(创建 ${original.name} 实例参数:, args); return new original(...args); } constructor.prototype original.prototype; return constructor; } logClass class UserService { constructor(private db: string) {} getUser(id: number) { return { id, name: 张三 }; } }3.2 方法装饰器// 自动重试装饰器 function retry(times: number 3) { return function ( target: any, methodName: string, descriptor: PropertyDescriptor ) { const original descriptor.value; descriptor.value async function (...args: any[]) { for (let i 0; i times; i) { try { return await original.apply(this, args); } catch (err) { if (i times - 1) throw err; await new Promise(r setTimeout(r, Math.pow(2, i) * 1000)); } } }; }; } class ApiService { retry(3) async fetchData(url: string) { const res await fetch(url); if (!res.ok) throw new Error(HTTP ${res.status}); return res.json(); } }四、类型体操实战4.1 实现一个深只读类型type DeepReadonlyT { readonly [P in keyof T]: T[P] extends object ? T[P] extends Function ? T[P] : DeepReadonlyT[P] : T[P]; }; type Config { api: { baseUrl: string; timeout: number }; features: string[]; handler: () void; }; type ReadonlyConfig DeepReadonlyConfig; // { readonly api: { readonly baseUrl: string; readonly timeout: number }; ... }五、总结泛型约束让类型安全更精确——善用extends keyof条件类型是高级类型的基础——理解infer关键字装饰器简化重复逻辑——日志、权限、重试都是典型场景用type而非interface定义复杂类型——更灵活收藏本文关注我后续更新更多 TypeScript 进阶系列。三、实战进阶TypeScript 最佳实践3.1 错误处理与异常设计在生产环境中完善的错误处理是系统稳定性的基石。以下是 TypeScript 的推荐错误处理模式// 全局错误边界React/ 全局错误处理Vue3 // Vue3 全局错误处理 const app createApp(App); app.config.errorHandler (err, instance, info) { // 1. 上报错误到监控系统Sentry/自建 errorReporter.capture(err, { component: instance?.$options?.name, info, userAgent: navigator.userAgent, url: location.href, }); // 2. 区分错误类型网络错误 vs 业务错误 vs 未知错误 if (err instanceof NetworkError) { toast.error(网络连接失败请检查网络); } else if (err instanceof BusinessError) { toast.warning(err.message); } else { toast.error(系统异常请稍后重试); console.error([未知错误], err); } }; // 异步错误Promise.reject 未处理 window.addEventListener(unhandledrejection, (event) { errorReporter.capture(event.reason, { type: unhandledrejection }); event.preventDefault(); // 阻止默认的控制台报错 });3.2 性能监控与可观测性现代系统必须具备三大可观测性Metrics指标、Logs日志、Traces链路追踪。// 前端性能监控Core Web Vitals 自定义指标 import { onCLS, onFID, onFCP, onLCP, onTTFB } from web-vitals; // 收集 Web Vitals 并上报 function reportWebVitals(metric) { const { name, value, id, delta } metric; // 发送到自建监控或 Google Analytics fetch(/api/analytics, { method: POST, body: JSON.stringify({ name, // CLS/FID/FCP/LCP/TTFB value, // 当前值 delta, // 与上次的差值 id, // 唯一标识 page: location.pathname, timestamp: Date.now(), }), keepalive: true, // 页面关闭时也能发送 }); } onCLS(reportWebVitals); // 累积布局偏移 onFID(reportWebVitals); // 首次输入延迟 onLCP(reportWebVitals); // 最大内容绘制 2.5s 为优 onFCP(reportWebVitals); // 首次内容绘制 onTTFB(reportWebVitals); // 首字节时间 // 自定义性能标记 performance.mark(api-start); const data await fetch(/api/data); performance.mark(api-end); performance.measure(api-latency, api-start, api-end); const [measure] performance.getEntriesByName(api-latency); console.log(API 耗时:, measure.duration.toFixed(2) ms);3.3 测试策略单元测试 集成测试高质量代码离不开完善的测试覆盖。以下是 TypeScript 推荐的测试实践// Vue3 组件测试Vitest Vue Testing Library import { describe, it, expect, vi } from vitest; import { render, fireEvent, waitFor } from testing-library/vue; import UserCard from ./UserCard.vue; describe(UserCard 组件, () { it(正确渲染用户信息, () { const { getByText } render(UserCard, { props: { name: 张三, email: zhangexample.com, role: admin }, }); expect(getByText(张三)).toBeInTheDocument(); expect(getByText(zhangexample.com)).toBeInTheDocument(); expect(getByText(管理员)).toBeInTheDocument(); }); it(点击删除按钮时 emit delete 事件, async () { const { getByRole, emitted } render(UserCard, { props: { name: 李四, email: liexample.com, role: user }, }); await fireEvent.click(getByRole(button, { name: 删除 })); expect(emitted().delete).toBeTruthy(); expect(emitted().delete[0]).toEqual([{ email: liexample.com }]); }); it(加载状态下显示 Skeleton, () { const { container } render(UserCard, { props: { loading: true }, }); expect(container.querySelector(.skeleton)).toBeInTheDocument(); }); }); // Pinia Store 测试 import { setActivePinia, createPinia } from pinia; import { useUserStore } from /stores/user; describe(UserStore, () { beforeEach(() setActivePinia(createPinia())); it(login 成功后更新 state, async () { const store useUserStore(); vi.spyOn(authApi, login).mockResolvedValue({ token: mock-token, user: { id: 1, name: 测试用户 }, }); await store.login(testexample.com, password); expect(store.isLoggedIn).toBe(true); expect(store.user?.name).toBe(测试用户); expect(localStorage.getItem(token)).toBe(mock-token); }); });3.4 生产部署清单上线前必检检查项具体内容优先级配置安全密钥不在代码中用环境变量或 VaultP0错误处理所有 API 有 fallback不暴露内部错误P0日志规范结构化 JSON 日志含 traceIdP0健康检查/health 接口K8s readiness/liveness probeP0限流保护API 网关或应用层限流P1监控告警错误率/响应时间/CPU/内存 四大指标P1压测验证上线前跑 10 分钟压测确认 QPS/延迟P1回滚预案蓝绿部署或金丝雀发布问题 1 分钟回滚P1四、常见问题排查4.1 TypeScript 内存占用过高排查步骤确认泄漏存在观察内存是否持续增长而非偶发峰值生成内存快照使用对应工具Chrome DevTools / heapdump / memory_profiler比对两次快照找到两次快照间新增且未释放的对象溯源代码找到对象创建的调用栈确认是否被缓存/全局变量/闭包持有常见原因全局/模块级变量无限增长缓存无上限事件监听器添加但未移除定时器/interval 未清理闭包意外持有大对象引用4.2 性能瓶颈在哪里通用排查三板斧数据库explain 慢查询加索引缓存热点数据网络 IO接口耗时分布P50/P90/P99N1 查询问题CPU火焰图flamegraph找热点函数减少不必要计算五、总结与最佳实践学习 TypeScript 的正确姿势先跑通再优化先让代码工作再根据性能测试数据做针对性优化了解底层原理知道框架帮你做了什么才知道什么时候需要绕过它从错误中学习每次线上问题都是提升的机会认真做 RCA根因分析保持代码可测试依赖注入、单一职责让每个函数都能独立测试关注社区动态订阅官方博客/Release Notes及时了解新特性和 Breaking Changes觉得有帮助点赞收藏关注持续更新 TypeScript 实战系列。觉得有用的话点个赞收藏关注我持续更新优质技术内容标签TypeScript | TypeScript5 | 新特性 | 进阶 | 实战