TypeScript 类型体操:10 个常用工具类型实现
Nina Santos | 2026-08-27T20:56:09 | JavaScript
手写实现 Partial、Pick、Omit、DeepReadonly 等 10 个 TypeScript 内置和常用工具类型,深入理解类型系统。
# TypeScript 类型体操:10 个工具类型实现 ## 1. MyPartial:所有属性可选 ```typescript type MyPartial = { [K in keyof T]?: T[K]; }; // 测试 interface User { name: string; age: number; } type PartialUser = MyPartial; // { name?: string; age?: number; } ``` ## 2. MyRequired:所有属性必选 ```typescript type MyRequired = { [K in keyof T]-?: T[K]; }; // -? 移除可选标记 ``` ## 3. MyPick:选取指定属性 ```typescript type MyPick = { [P in K]: T[P]; }; type UserName = MyPick; // { name: string; } ``` ## 4. MyOmit:排除指定属性 ```typescript type MyOmit = { [P in keyof T as P extends K ? never : P]: T[P]; }; // 或者用 Pick + Exclude 组合 type MyOmit2 = Pick>; type UserWithoutAge = MyOmit; // { name: string; } ``` ## 5. DeepReadonly:深度只读 ```typescript type DeepReadonly = { readonly [K in keyof T]: T[K] extends object ? T[K] extends Function ? T[K] : DeepReadonly : T[K]; }; interface Config { db: { host: string; port: number; }; debug: boolean; } type ReadonlyConfig = DeepReadonly; // db.host 也是 readonly ``` ## 6. MyReturnType:获取函数返回类型 ```typescript type MyReturnType any> = T extends (...args: any[]) => infer R ? R : never; function getUser() { return { name: '张三', age: 25 }; } type UserType = MyReturnType; // { name: string; age: number; } ``` ## 7. MyParameters:获取函数参数类型 ```typescript type MyParameters any> = T extends (...args: infer P) => any ? P : never; function login(username: string, password: string) { } type LoginParams = MyParameters; // [username: string, password: string] ``` ## 8. Awaited:解包 Promise ```typescript type MyAwaited = T extends Promise ? MyAwaited // 递归处理嵌套 Promise : T; type A = MyAwaited>; // string type B = MyAwaited>>; // number ``` ## 9. TupleToUnion:元组转联合类型 ```typescript type TupleToUnion = T[number]; type Colors = TupleToUnion; // 'red' | 'green' | 'blue' ``` ## 10. NonNullable 属性过滤 ```typescript type NonNullableKeys = { [K in keyof T]: null extends T[K] ? never : K; }[keyof T]; type PickNonNullable = Pick>; interface Form { name: string; bio: string | null; age: number; address: string | null; } type RequiredFields = PickNonNullable; // { name: string; age: number; } ``` ## 实战:API 响应类型 ```typescript // 通用 API 响应包装 type ApiResponse = { code: number; message: string; data: T; }; // 分页响应 type PageResponse = ApiResponse; // 使用 type UserListResponse = PageResponse; // 自动推导出完整类型结构 ``` ## 类型体操技巧 1. `infer` 用于类型推断(模式匹配) 2. 递归类型处理嵌套结构 3. 条件类型 `T extends U ? X : Y` 实现类型分支 4. 映射类型 `[K in keyof T]` 遍历属性 5. 模板字面量类型做字符串操作