泛型性能考量

泛型性能考量

TypeScript 的泛型为代码提供了灵活性和类型安全，但不当使用可能带来性能开销。理解泛型在编译和运行时的行为差异，以及如何优化泛型代码，对编写高效 TypeScript 应用至关重要。

编译时类型擦除与运行时影响

TypeScript 泛型在编译为 JavaScript 时会进行类型擦除，这意味着泛型类型参数不会保留到运行时。例如：

function identity<T>(arg: T): T {
  return arg;
}

// 编译后变为：
function identity(arg) {
  return arg;
}

虽然类型擦除减少了运行时负担，但过度复杂的泛型约束仍可能影响编译速度：

// 可能拖慢编译的类型约束
function merge<
  T extends Record<string, any>,
  U extends Record<keyof T, any>
>(obj1: T, obj2: U) {
  return { ...obj1, ...obj2 };
}

泛型实例化与代码膨胀

当泛型函数与多种具体类型一起使用时，编译器可能生成多个函数实现（称为"实例化"）。虽然 TypeScript 通常避免这种膨胀，但某些模式仍会导致代码体积增加：

// 可能产生多个实例化的模式
class Wrapper<T> {
  constructor(public value: T) {}
  map<U>(fn: (x: T) => U): Wrapper<U> {
    return new Wrapper(fn(this.value));
  }
}

// 使用不同类型参数会生成不同实现
const numWrapper = new Wrapper(42);
const strWrapper = new Wrapper("hello");

条件类型与递归类型的性能

复杂条件类型和递归类型可能显著增加类型检查时间：

// 深层递归类型
type DeepReadonly<T> = {
  readonly [P in keyof T]: T[P] extends object 
    ? DeepReadonly<T[P]> 
    : T[P]
};

// 使用大型对象结构时会变慢
type BigObj = DeepReadonly<{
  a: { b: { c: { d: string } } },
  // ...更多深层嵌套
}>;

泛型与函数重载的权衡

对于性能关键路径，有时函数重载比泛型更高效：

// 泛型版本
function parse<T>(input: string): T {
  return JSON.parse(input);
}

// 重载版本（编译后更高效）
function parse(input: string): number;
function parse(input: string): string;
function parse(input: string): any {
  return JSON.parse(input);
}

泛型组件与 React 性能

在 React 中使用泛型组件时，不当的类型参数可能导致不必要的重新渲染：

// 泛型组件示例
interface ListProps<T> {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
}

function GenericList<T>({ items, renderItem }: ListProps<T>) {
  return <div>{items.map(renderItem)}</div>;
}

// 使用时确保类型稳定
// 避免每次渲染都推断新类型
const StringList = () => (
  <GenericList
    items={["a", "b"]}
    renderItem={(item) => <span>{item}</span>} // item 类型应稳定
  />
);

工具类型与性能优化

内置工具类型如 Pick、Omit 通常经过优化，但自定义复杂工具类型可能影响性能：

// 高效的工具类型使用
type User = {
  id: string;
  name: string;
  email: string;
  createdAt: Date;
};

// 优于自定义实现
type UserPreview = Pick<User, 'id' | 'name'>;

// 可能较慢的深度工具类型
type DeepPartial<T> = {
  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
};

泛型与数组操作

对大型数据集使用泛型数组方法时，类型推断可能成为瓶颈：

// 对大型数组更高效的写法
function filterNumbers<T>(arr: T[], predicate: (x: T) => boolean): T[] {
  return arr.filter(predicate);
}

// 对于已知类型，直接指定更高效
function filterNumbers(arr: number[], predicate: (x: number) => boolean): number[] {
  return arr.filter(predicate);
}

类型推断与显式注解

允许类型推断通常更简洁，但在复杂场景下显式类型注解可能提升性能：

// 依赖推断（可能较慢）
function process<T>(data: T) {
  // ...复杂操作
}

// 显式注解（可能更快）
function process(data: { id: string; value: number }) {
  // ...相同操作
}

泛型缓存模式

对于计算密集的类型操作，可以实现缓存机制：

// 类型级别缓存示例
type Memoized<T> = T & { __memoized?: true };

function withCache<T extends (...args: any[]) => any>(
  fn: T
): Memoized<T> {
  const cache = new Map<string, ReturnType<T>>();
  const memoized = ((...args: any[]) => {
    const key = JSON.stringify(args);
    if (cache.has(key)) return cache.get(key)!;
    const result = fn(...args);
    cache.set(key, result);
    return result;
  }) as Memoized<T>;
  return memoized;
}

泛型与第三方库集成

与第三方 JavaScript 库交互时，泛型类型声明影响性能：

// 声明合并示例
declare module 'lodash' {
  interface LoDashStatic {
    keyBy<T>(collection: T[], iteratee?: string): { [key: string]: T };
  }
}

// 精确的类型声明比宽泛的 any 更高效
_.keyBy<User>(users, 'id');  // 优于 _.keyBy(users, 'id')