1. 什么是TS类型体操TypeScript类型系统就像是一个强大的健身房而类型体操就是在这个健身房里的各种锻炼。它指的是利用TypeScript的类型系统进行各种复杂操作和推导以实现类型安全的编程模式。我第一次接触这个概念是在一个开源项目的PR里看到有人用infer和extends实现了一个递归的类型工具当时的感觉就像看到有人用JavaScript写出了一个微型操作系统。这种把类型系统玩出花的技术后来就被社区亲切地称为类型体操。2. 为什么要练习类型体操2.1 提升代码安全性类型体操最直接的价值就是能在编译期捕获更多潜在错误。比如我们有一个用户角色系统type UserRole admin | editor | viewer; function checkPermission(role: UserRole) { // ... } // 这里会报类型错误 checkPermission(unknown); // 错误类型unknown不能赋值给类型UserRole2.2 增强代码提示良好的类型定义能让IDE提供更准确的自动补全。比如定义一个表单配置type FormField { type: text | number | select; options?: string[]; defaultValue?: string | number; }; const fields: FormField[] [ { type: select, // 输入options时会自动提示 options: [A, B] } ];2.3 减少运行时检查很多原本需要在运行时做的类型检查现在可以提前到编译期function parseInputT(input: string): T extends number ? number : string { return isNaN(Number(input)) ? input as any : Number(input) as any; } const num parseInputnumber(123); // 类型为number const str parseInputstring(abc); // 类型为string3. 基础类型体操动作3.1 条件类型Conditional Types这是类型体操中最基础的拉伸运动type IsStringT T extends string ? true : false; type A IsStringhello; // true type B IsString123; // false3.2 类型推断infer相当于类型系统中的变量声明type UnpackPromiseT T extends Promiseinfer U ? U : T; type A UnpackPromisePromisestring; // string type B UnpackPromisenumber; // number3.3 映射类型Mapped Types批量转换类型的有氧运动type ReadonlyifyT { readonly [P in keyof T]: T[P]; }; interface User { name: string; age: number; } type ReadonlyUser ReadonlyifyUser; // 等同于 // { // readonly name: string; // readonly age: number; // }4. 进阶类型体操套路4.1 递归类型类型系统中的循环type DeepReadonlyT { readonly [P in keyof T]: T[P] extends object ? DeepReadonlyT[P] : T[P]; }; interface Nested { a: { b: { c: number; }; }; } type ReadonlyNested DeepReadonlyNested; // 所有层级都变成readonly4.2 类型谓词Type Predicates类型系统中的断言function isStringArray(value: any): value is string[] { return Array.isArray(value) value.every(item typeof item string); } const arr: unknown [a, b, c]; if (isStringArray(arr)) { arr.map(s s.toUpperCase()); // 这里arr被推断为string[] }4.3 模板字面量类型TypeScript 4.1引入的新器械type EventName click | scroll | mousemove; type HandlerName on${CapitalizeEventName}; // 等同于 // type HandlerName onClick | onScroll | onMousemove5. 实战类型体操案例5.1 API响应类型安全假设我们有一个返回用户数据的APItype APIResponseT | { status: success; data: T } | { status: error; message: string }; function fetchUser(): APIResponse{ name: string; age: number } { // 实际实现 } const result fetchUser(); if (result.status success) { console.log(result.data.name); // 安全访问 } else { console.error(result.message); // 知道这里一定有message }5.2 表单验证类型构建类型安全的表单验证type ValidationResultT { [K in keyof T]: { isValid: boolean; message?: string; } }; function validateFormT(form: T): ValidationResultT { // 实现验证逻辑 } const form { username: test, password: }; const result validateForm(form); // result类型为 // { // username: { isValid: boolean; message?: string }; // password: { isValid: boolean; message?: string }; // }5.3 Redux Action类型安全确保Redux action的类型安全type ActionMap { LOGIN: { username: string; password: string }; LOGOUT: never; UPDATE_PROFILE: { name?: string; age?: number }; }; type ActionT extends keyof ActionMap { type: T; payload: ActionMap[T]; }; function dispatchT extends keyof ActionMap(action: ActionT) { // 实现dispatch逻辑 } dispatch({ type: LOGIN, payload: { username: test, password: 123 } }); dispatch({ type: LOGOUT, payload: undefined }); // 错误payload不能是undefined6. 类型体操常见问题与解决方案6.1 类型递归深度限制TypeScript对递归深度有限制默认约50层解决方案// 使用尾递归优化 type ReverseT, R extends any[] [] T extends [infer First, ...infer Rest] ? ReverseRest, [First, ...R] : R; // 比普通递归更高效 type NormalReverseT T extends [infer First, ...infer Rest] ? [...NormalReverseRest, First] : T;6.2 复杂类型的性能问题过于复杂的类型会影响编译速度建议将复杂类型拆分为多个子类型使用interface替代type在某些情况下性能更好避免过度嵌套的条件类型6.3 类型推导失败有时类型推导不如预期可以显式指定类型参数使用类型断言谨慎使用重构类型定义使其更简单7. 类型体操工具推荐7.1 实用工具类型// 获取函数参数类型 type ParametersT extends (...args: any) any T extends (...args: infer P) any ? P : never; // 获取构造函数实例类型 type InstanceTypeT extends new (...args: any) any T extends new (...args: any) infer R ? R : any; // 非空类型 type NonNullableT T extends null | undefined ? never : T;7.2 第三方工具库type-fest包含大量实用工具类型utility-types类似lodash的工具类型集合ts-toolbelt类型编程工具包8. 类型体操最佳实践渐进式复杂化从简单类型开始逐步增加复杂度充分测试使用// ts-expect-error注释测试错误情况文档注释为复杂类型添加详细注释性能监控关注编译时间避免过度优化保持可读性当类型过于复杂时考虑重构我在实际项目中最深的体会是类型体操应该服务于实际需求而不是为了炫技。一个好的类型系统应该像好的UI一样用户开发者几乎感受不到它的存在却能从中获得安全保障和开发效率的提升。 
长河君 · 2026/10/27 4:05:51 · 阅读 1.2k TypeScript类型体操：提升代码安全与开发效率
1. 什么是TS类型体操TypeScript类型系统就像是一个强大的健身房而类型体操就是在这个健身房里的各种锻炼。它指的是利用TypeScript的类型系统进行各种复杂操作和推导以实现类型安全的编程模式。我第一次接触这个概念是在一个开源项目的PR里看到有人用infer和extends实现了一个递归的类型工具当时的感觉就像看到有人用JavaScript写出了一个微型操作系统。这种把类型系统玩出花的技术后来就被社区亲切地称为类型体操。2. 为什么要练习类型体操2.1 提升代码安全性类型体操最直接的价值就是能在编译期捕获更多潜在错误。比如我们有一个用户角色系统type UserRole admin | editor | viewer; function checkPermission(role: UserRole) { // ... } // 这里会报类型错误 checkPermission(unknown); // 错误类型unknown不能赋值给类型UserRole2.2 增强代码提示良好的类型定义能让IDE提供更准确的自动补全。比如定义一个表单配置type FormField { type: text | number | select; options?: string[]; defaultValue?: string | number; }; const fields: FormField[] [ { type: select, // 输入options时会自动提示 options: [A, B] } ];2.3 减少运行时检查很多原本需要在运行时做的类型检查现在可以提前到编译期function parseInputT(input: string): T extends number ? number : string { return isNaN(Number(input)) ? input as any : Number(input) as any; } const num parseInputnumber(123); // 类型为number const str parseInputstring(abc); // 类型为string3. 基础类型体操动作3.1 条件类型Conditional Types这是类型体操中最基础的拉伸运动type IsStringT T extends string ? true : false; type A IsStringhello; // true type B IsString123; // false3.2 类型推断infer相当于类型系统中的变量声明type UnpackPromiseT T extends Promiseinfer U ? U : T; type A UnpackPromisePromisestring; // string type B UnpackPromisenumber; // number3.3 映射类型Mapped Types批量转换类型的有氧运动type ReadonlyifyT { readonly [P in keyof T]: T[P]; }; interface User { name: string; age: number; } type ReadonlyUser ReadonlyifyUser; // 等同于 // { // readonly name: string; // readonly age: number; // }4. 进阶类型体操套路4.1 递归类型类型系统中的循环type DeepReadonlyT { readonly [P in keyof T]: T[P] extends object ? DeepReadonlyT[P] : T[P]; }; interface Nested { a: { b: { c: number; }; }; } type ReadonlyNested DeepReadonlyNested; // 所有层级都变成readonly4.2 类型谓词Type Predicates类型系统中的断言function isStringArray(value: any): value is string[] { return Array.isArray(value) value.every(item typeof item string); } const arr: unknown [a, b, c]; if (isStringArray(arr)) { arr.map(s s.toUpperCase()); // 这里arr被推断为string[] }4.3 模板字面量类型TypeScript 4.1引入的新器械type EventName click | scroll | mousemove; type HandlerName on${CapitalizeEventName}; // 等同于 // type HandlerName onClick | onScroll | onMousemove5. 实战类型体操案例5.1 API响应类型安全假设我们有一个返回用户数据的APItype APIResponseT | { status: success; data: T } | { status: error; message: string }; function fetchUser(): APIResponse{ name: string; age: number } { // 实际实现 } const result fetchUser(); if (result.status success) { console.log(result.data.name); // 安全访问 } else { console.error(result.message); // 知道这里一定有message }5.2 表单验证类型构建类型安全的表单验证type ValidationResultT { [K in keyof T]: { isValid: boolean; message?: string; } }; function validateFormT(form: T): ValidationResultT { // 实现验证逻辑 } const form { username: test, password: }; const result validateForm(form); // result类型为 // { // username: { isValid: boolean; message?: string }; // password: { isValid: boolean; message?: string }; // }5.3 Redux Action类型安全确保Redux action的类型安全type ActionMap { LOGIN: { username: string; password: string }; LOGOUT: never; UPDATE_PROFILE: { name?: string; age?: number }; }; type ActionT extends keyof ActionMap { type: T; payload: ActionMap[T]; }; function dispatchT extends keyof ActionMap(action: ActionT) { // 实现dispatch逻辑 } dispatch({ type: LOGIN, payload: { username: test, password: 123 } }); dispatch({ type: LOGOUT, payload: undefined }); // 错误payload不能是undefined6. 类型体操常见问题与解决方案6.1 类型递归深度限制TypeScript对递归深度有限制默认约50层解决方案// 使用尾递归优化 type ReverseT, R extends any[] [] T extends [infer First, ...infer Rest] ? ReverseRest, [First, ...R] : R; // 比普通递归更高效 type NormalReverseT T extends [infer First, ...infer Rest] ? [...NormalReverseRest, First] : T;6.2 复杂类型的性能问题过于复杂的类型会影响编译速度建议将复杂类型拆分为多个子类型使用interface替代type在某些情况下性能更好避免过度嵌套的条件类型6.3 类型推导失败有时类型推导不如预期可以显式指定类型参数使用类型断言谨慎使用重构类型定义使其更简单7. 类型体操工具推荐7.1 实用工具类型// 获取函数参数类型 type ParametersT extends (...args: any) any T extends (...args: infer P) any ? P : never; // 获取构造函数实例类型 type InstanceTypeT extends new (...args: any) any T extends new (...args: any) infer R ? R : any; // 非空类型 type NonNullableT T extends null | undefined ? never : T;7.2 第三方工具库type-fest包含大量实用工具类型utility-types类似lodash的工具类型集合ts-toolbelt类型编程工具包8. 类型体操最佳实践渐进式复杂化从简单类型开始逐步增加复杂度充分测试使用// ts-expect-error注释测试错误情况文档注释为复杂类型添加详细注释性能监控关注编译时间避免过度优化保持可读性当类型过于复杂时考虑重构我在实际项目中最深的体会是类型体操应该服务于实际需求而不是为了炫技。一个好的类型系统应该像好的UI一样用户开发者几乎感受不到它的存在却能从中获得安全保障和开发效率的提升。