TypeScript 高级类型技巧：5 个实用模式提升代码质量

TypeScript 高级类型技巧5 个实用模式提升代码质量TypeScript 作为 JavaScript 的超集提供了强大的类型系统。掌握一些高级类型技巧可以让你的代码更加健壮、可维护。本文分享 5 个实用的 TypeScript 类型模式。1. 条件类型与 infer 关键字条件类型允许你根据类型条件进行选择配合 infer 可以提取类型中的特定部分。示例代码type GetReturnType T extends (...args: any[]) infer R ? R : never;function getUser(): { id: number; name: string } { return { id: 1, name: Alice }; }type User GetReturnType;这个技巧在封装 API 响应类型时非常有用。2. 映射类型与模板字面量类型映射类型可以基于现有类型创建新类型结合模板字面量类型能生成更有意义的属性名。示例代码type Events { click: (e: MouseEvent) void; focus: () void; blur: () void; };type OnEvents { [K in keyof T as on${Capitalize}]: T[K]; };type DOMEvents OnEvents;这种模式在事件系统中非常常见。3. 类型守卫与类型缩小使用类型守卫函数可以在运行时检查类型帮助 TypeScript 在编译时进行类型缩小。示例代码function isString(value: unknown): value is string { return typeof value string; }function processValue(value: string | number) { if (isString(value)) { return value.toUpperCase(); } return value.toFixed(2); }类型守卫让联合类型的处理更加安全。4. 实用工具类型的组合TypeScript 内置了 Partial、Pick、Omit 等工具类型组合使用可以创建精确的类型。示例代码type User { id: number; name: string; email: string; role: admin | user; };type UpdateUserDTO Partial;type CreateUserDTO Omit;这种组合在 API 接口定义中非常实用。5. 泛型约束与默认类型参数泛型约束确保类型参数满足特定条件默认类型参数提供灵活性。示例代码interface Identifiable { id: number | string; }function getById(items: T[], id: T[id]): T | undefined { return items.find(item item.id id); }type Config { key: string; value: T; };const stringConfig: Config { key: theme, value: dark };const numberConfig: Config { key: fontSize, value: 14 };这个模式在创建可复用的工具函数时非常有用。总结掌握这些 TypeScript 高级类型技巧可以• 编写更类型安全的代码• 减少运行时错误• 提升开发体验更好的智能提示• 创建更灵活的工具函数和组件建议在实际项目中逐步应用这些模式从简单的场景开始逐步深入到复杂的类型系统设计中。