1. 泛型基础概念
定义：泛型是 TypeScript 中允许创建可复用组件的特性，这些组件可以支持多种数据类型，而非单一特定类型。
核心优势：
- 代码复用性：同一组件可处理不同类型数据
- 类型安全：在编译阶段捕获类型错误
- 灵活性：保持代码的灵活性同时提供强类型支持
泛型函数
// 基础泛型函数语法
function identity<T>(arg: T): T {return arg;
}// 使用方式
const result = identity<string>("hello"); // 指定类型参数
const inferredResult = identity(123); // 类型自动推断为 number泛型类
class Box<T> {private value: T;constructor(value: T) {this.value = value;}getValue(): T {return this.value;}
}// 使用示例
const numberBox = new Box<number>(42);
const stringBox = new Box("text"); // 类型自动推断2. 泛型约束详解
基本约束
interface HasLength {length: number;
}// 约束 T 必须实现 HasLength 接口
function getLength<T extends HasLength>(arg: T): number {return arg.length;
}// 有效调用
getLength("hello"); // 字符串有 length 属性
getLength([1, 2, 3]); // 数组有 length 属性// 错误调用
getLength(123); // 数字没有 length 属性键约束
// 约束 K 必须是 T 类型的键
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {return obj[key];
}const user = { name: "Alice", age: 30 };
const name = getProperty(user, "name"); // 正确
const invalid = getProperty(user, "address"); // 错误：address 不是 user 的键构造函数约束
interface Constructor<T> {new (...args: any[]): T;
}function createInstance<T>(ctor: Constructor<T>): T {return new ctor();
}class MyClass {constructor() {}
}const instance = createInstance(MyClass); // 创建 MyClass 实例3. 接口深入理解
接口定义
interface Person {name: string;age?: number; // 可选属性readonly id: number; // 只读属性[propName: string]: any; // 任意属性
}// 使用接口
const person: Person = {name: "Bob",id: 12345,address: "123 Street" // 任意属性
};person.age = 30; // 可选属性可赋值
person.id = 67890; // 错误：只读属性不可修改接口继承
interface Shape {color: string;
}interface Square extends Shape {sideLength: number;
}// 实现接口
const square: Square = {color: "blue",sideLength: 10
};函数类型接口
interface SearchFunc {(source: string, subString: string): boolean;
}const mySearch: SearchFunc = function(src, sub) {return src.includes(sub);
};4. 泛型与接口结合应用
泛型接口
interface Container<T> {value: T;getValue: () => T;setValue: (newValue: T) => void;
}// 实现泛型接口
class BoxContainer<T> implements Container<T> {constructor(private _value: T) {}getValue() {return this._value;}setValue(newValue: T) {this._value = newValue;}
}泛型工具类型
// Partial<T> - 创建所有属性可选的类型
interface User {name: string;age: number;
}type PartialUser = Partial<User>;
// 等价于 { name?: string; age?: number; }// Readonly<T> - 创建所有属性只读的类型
type ReadonlyUser = Readonly<User>;// Pick<T, K> - 从 T 中选择一组属性 K
type NameOnly = Pick<User, "name">;
// 等价于 { name: string; }// Record<K, T> - 创建一个 K 类型为键，T 类型为值的对象类型
type UserRecords = Record<string, User>;5. 高级泛型技术
条件类型
// 基本条件类型语法
type IsString<T> = T extends string ? true : false;type A = IsString<string>; // true
type B = IsString<number>; // false// 分布式条件类型
type ToArray<T> = T extends any ? T[] : never;type StringArray = ToArray<string>; // string[]
type NumberOrStringArray = ToArray<number | string>; // number[] | string[]映射类型
// 基本映射类型
type Readonly<T> = {readonly [P in keyof T]: T[P];
};type Optional<T> = {[P in keyof T]?: T[P];
};// 使用示例
type ReadonlyUser = Readonly<User>;
type OptionalUser = Optional<User>;类型推断与 infer
// 提取函数返回类型
type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any;type Num = ReturnType<() => number>; // number
type Str = ReturnType<(s: string) => string>; // string案例 1：实现一个通用的响应接口
interface ApiResponse<T> {code: number;message: string;data: T;
}// 使用示例
type UserResponse = ApiResponse<User>;
type ProductListResponse = ApiResponse<Product[]>;// 处理 API 响应
function processResponse<T>(response: ApiResponse<T>): T {if (response.code === 200) {return response.data;}throw new Error(response.message);
}案例 2：实现一个泛型缓存类
class Cache<T> {private storage: Map<string, T> = new Map();set(key: string, value: T): void {this.storage.set(key, value);}get(key: string): T | undefined {return this.storage.get(key);}clear(): void {this.storage.clear();}
}// 使用示例
const userCache = new Cache<User>();
userCache.set("currentUser", { name: "Alice", age: 30 });
const currentUser = userCache.get("currentUser");案例总结
- 明确类型参数：除非类型可以被可靠推断，否则明确指定泛型类型参数
- 约束类型参数：使用泛型约束确保类型参数满足特定条件
- 避免过度泛型：仅在必要时使用泛型，避免增加不必要的复杂性
- 优先使用接口而非类型别名：对于对象类型定义，优先使用
interface而非type - 使用工具类型：利用 TypeScript 内置的工具类型（Partial、Readonly 等）简化常见操作
常见错误与解决方案
错误 1：泛型函数返回类型不匹配
// 错误示例
function createArray<T>(length: number, value: T): number[] {return Array(length).fill(value); // 错误：可能返回非 number[] 类型
}// 解决方案
function createArray<T>(length: number, value: T): T[] {return Array(length).fill(value);
}错误 2：接口属性冲突
// 错误示例
interface A { x: number; }
interface B { x: string; }
interface C extends A, B {} // 错误：属性 x 类型冲突// 解决方案
interface C { x: number | string; } // 联合类型解决冲突错误 3：泛型约束不足
// 错误示例
function getLength<T>(arg: T): number {return arg.length; // 错误：T 不一定有 length 属性
}// 解决方案
function getLength<T extends { length: number }>(arg: T): number {return arg.length;
}与其他 TypeScript 特性的组合
泛型与装饰器
function logClass<T extends { new (...args: any[]): {} }>(constructor: T) {return class extends constructor {constructor(...args: any[]) {console.log("Creating instance with arguments:", args);super(...args);}};
}@logClass
class MyClass {constructor(public name: string) {}
}const instance = new MyClass("Test"); // 输出: Creating instance with arguments: ["Test"]泛型与命名空间
namespace Utils {export function identity<T>(arg: T): T {return arg;}
}const result = Utils.identity("hello"); // 使用命名空间中的泛型函数总结
泛型和接口是 TypeScript 中最强大的两个特性，它们共同构成了 TypeScript 类型系统的核心。通过泛型，我们可以创建高度可复用的组件，同时保持类型安全；通过接口，我们可以定义清晰的契约，规范代码结构。合理运用这两个特性，可以显著提升代码质量、可维护性和开发效率。
在实际开发中，建议遵循最佳实践，从简单的泛型应用开始，逐步深入到高级技术。同时，注意避免常见错误，充分利用 TypeScript 提供的工具类型和内置功能，打造健壮、灵活的 TypeScript 应用。
