700 字
4 分钟
TypeScript 高级类型编程实战：从泛型到类型体操的进阶指南
TypeScript 高级类型编程实战：从泛型到类型体操的进阶指南
📝 前言：TypeScript 的类型系统是图灵完备的，这意味着我们可以在类型层面进行编程。掌握高级类型技巧不仅能让我们的代码更安全，还能提高开发效率。
一、泛型深度解析
1.1 泛型的基本用法
泛型允许我们编写灵活的、可复用的代码：
// 不使用泛型：需要为每种类型写重复代码function identityNumber(arg: number): number { return arg;}
function identityString(arg: string): string { return arg;}
// 使用泛型function identity<T>(arg: T): T { return arg;}
// 使用方式const num = identity<number>(42);const str = identity('hello');1.2 泛型约束
有时候我们需要限制泛型的范围：
interface HasLength { length: number;}
function logLength<T extends HasLength>(arg: T): T { console.log(arg.length); return arg;}
logLength([1, 2, 3]);logLength('hello');1.3 多个泛型参数
function mapObject<K extends string, V, R>( obj: Record<K, V>, fn: (value: V, key: K) => R): Record<K, R> { const result = {} as Record<K, R>; for (const key in obj) { result[key] = fn(obj[key], key); } return result;}二、条件类型
2.1 基础条件类型
条件类型让我们可以根据类型关系选择类型：
type IsString<T> = T extends string ? true : false;
type A = IsString<string>;type B = IsString<number>;2.2 infer 关键字
infer 允许我们在条件类型中推断类型：
// 提取数组元素类型type ElementType<T> = T extends (infer E)[] ? E : never;type Num = ElementType<number[]>;
// 提取函数返回值类型type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;2.3 实用工具类型
type NonNullable<T> = T extends null | undefined ? never : T;type Extract<T, U> = T extends U ? T : never;type Exclude<T, U> = T extends U ? never : T;三、映射类型
3.1 基础映射
type Partial<T> = { [P in keyof T]?: T[P];};
type Required<T> = { [P in keyof T]-?: T[P];};
type Readonly<T> = { readonly [P in keyof T]: T[P];};3.2 键重映射
type AddPrefix<T, P extends string> = { [K in keyof T as `${P}${string & K}`]: T[K];};
interface User { name: string; age: number;}
type PrefixedUser = AddPrefix<User, 'user_'>四、模板字面量类型
type Color = 'red' | 'blue';type Size = 'small' | 'large';type Style = `${Color}-${Size}`;
type EventName<T extends string> = `on${Capitalize<T>}`;五、类型推断技巧
// const 断言const config = { host: 'localhost', port: 3000} as const;
// 元组类型推断function tuple<T extends unknown[]>(...items: T): T { return items;}六、实战案例
6.1 完整的 API 类型定义
interface ApiResponse<T> { data: T; meta: { total: number; page: number };}
type Endpoints = { 'GET /users': { params: { page?: number }; response: ApiResponse<User[]>; };};七、总结
TypeScript 高级类型技巧：
- 泛型：编写可复用的类型安全代码
- 条件类型：根据类型关系动态选择类型
- 映射类型：批量转换类型结构
- 模板字面量类型：操作字符串类型
- 类型推断：让编译器自动推断最佳类型
记住要在可读性和类型安全之间找到平衡！
TypeScript 高级类型编程实战：从泛型到类型体操的进阶指南
https://www.oferry.com/posts/a79/ 