TypeScript高级类型体操：让类型安全更上一层楼

TypeScript高级类型体操让类型安全更上一层楼大家好我是蔓蔓。TypeScript是我最喜欢的技术之一它的类型系统非常强大。今天我来和大家分享TypeScript的高级类型技巧让你的代码更加类型安全。条件类型// 基础条件类型 type IsStringT T extends string ? true : false; type A IsStringstring; // true type B IsStringnumber; // false // 提取类型 type ExtractArrayItemT T extends Arrayinfer U ? U : never; type NumberArray number[]; type Item1 ExtractArrayItemNumberArray; // number type StringArray string[]; type Item2 ExtractArrayItemStringArray; // string // 提取函数返回值 type ReturnTypeT T extends (...args: any[]) infer R ? R : never; function add(a: number, b: number): number { return a b; } type AddReturn ReturnTypetypeof add; // number映射类型// 基础映射类型 type ReadonlyT { readonly [P in keyof T]: T[P]; }; interface User { name: string; age: number; } type ReadonlyUser ReadonlyUser; // { readonly name: string; readonly age: number; } // 可选类型 type PartialT { [P in keyof T]?: T[P]; }; type PartialUser PartialUser; // { name?: string; age?: number; } // 必选类型 type RequiredT { [P in keyof T]-?: T[P]; }; // 选取部分属性 type PickT, K extends keyof T { [P in K]: T[P]; }; type UserName PickUser, name; // { name: string; } // 排除部分属性 type OmitT, K extends keyof T PickT, Excludekeyof T, K; type UserWithoutAge OmitUser, age; // { name: string; }联合类型与交叉类型// 联合类型 type Status pending | fulfilled | rejected; // 类型守卫 function isString(value: unknown): value is string { return typeof value string; } function process(value: unknown) { if (isString(value)) { console.log(value.toUpperCase()); // value被正确推断为string } } // 可辨识联合 interface SuccessResult { type: success; data: string; } interface ErrorResult { type: error; message: string; } type Result SuccessResult | ErrorResult; function handleResult(result: Result) { switch (result.type) { case success: console.log(result.data); // SuccessResult break; case error: console.log(result.message); // ErrorResult break; } } // 交叉类型 type UserInfo { name: string } { age: number };模板字面量类型// 基础用法 type EventName click | hover; type HandlerName on${CapitalizeEventName}; // onClick | onHover // 路径处理 type Path /api/users | /api/posts; type ApiUrl https://api.example.com${Path}; // 颜色类型 type Color red | blue | green; type CssColor color-${Color}; // color-red | color-blue | color-green递归类型// 深度只读 type DeepReadonlyT { readonly [P in keyof T]: T[P] extends object ? DeepReadonlyT[P] : T[P]; }; interface NestedObject { a: { b: { c: number; }; }; } type DeepReadonlyNested DeepReadonlyNestedObject; // Promise链处理 type PromiseValueT T extends Promiseinfer U ? PromiseValueU : T; type NestedPromise PromisePromisePromisenumber; type Unwrapped PromiseValueNestedPromise; // number实战应用// 配置类型 type Config { api: { baseUrl: string; timeout: number; }; auth: { tokenKey: string; }; }; // 深度路径类型 type DeepKeyT T extends object ? { [K in keyof T]: K extends string ? K | ${K}.${DeepKeyT[K]} : never; }[keyof T] : never; type ConfigKeys DeepKeyConfig; // api | auth | api.baseUrl | api.timeout | auth.tokenKey // 取值函数类型 type GetterT, K extends DeepKeyT K extends ${infer First}.${infer Rest} ? First extends keyof T ? GetterT[First], Rest : never : K extends keyof T ? T[K] : never; function getT, K extends DeepKeyT(obj: T, path: K): GetterT, K { return path.split(.).reduce((acc, key) acc[key], obj as any); } const config: Config { api: { baseUrl: https://api.com, timeout: 5000 }, auth: { tokenKey: token } }; const url get(config, api.baseUrl); // string const timeout get(config, api.timeout); // number总结TypeScript的类型系统非常强大掌握了这些高级类型技巧你就能写出更加类型安全、更加健壮的代码。类型体操虽然看起来复杂但当你真正掌握后会发现它能帮你避免很多潜在的bug。技术应当有温度好的类型系统能让你更有信心地修改和重构代码。