TypeScript泛型开发常见错误解析

心随雨下2025-11-30 16:15

1. 过度使用泛型

错误示例

TypeScript 复制代码

// 不必要的泛型
function identity<T>(value: T): T {
  return value;
}

// 应该直接使用具体类型
function identity(value: string): string {
  return value;
}

正确做法

TypeScript 复制代码

// 只在需要灵活性时使用泛型
function identity<T>(value: T): T {
  return value; // 确实需要处理任意类型时
}

2. 泛型约束缺失

错误示例

TypeScript 复制代码

function getLength<T>(obj: T): number {
  return obj.length; // Error: Property 'length' does not exist on type 'T'
}

正确做法

TypeScript 复制代码

// 添加约束确保类型安全
interface HasLength {
  length: number;
}

function getLength<T extends HasLength>(obj: T): number {
  return obj.length;
}

3. 泛型推断问题

错误示例

TypeScript 复制代码

function merge<T, U>(obj1: T, obj2: U) {
  return { ...obj1, ...obj2 };
}

const result = merge({ name: "John" }, 25); // U 被推断为 number，但可能不是期望的

正确做法

TypeScript 复制代码

// 明确指定类型或添加约束
function merge<T extends object, U extends object>(obj1: T, obj2: U): T & U {
  return { ...obj1, ...obj2 };
}

// 或者明确指定类型
const result = merge<{ name: string }, { age: number }>(
  { name: "John" }, 
  { age: 25 }
);

4. 泛型默认值使用不当

错误示例

TypeScript 复制代码

class Container<T = any> { // 过度使用 any
  value: T;
  
  constructor(value: T) {
    this.value = value;
  }
}

正确做法

TypeScript 复制代码

// 使用更具体的默认类型
class Container<T = unknown> {
  value: T;
  
  constructor(value: T) {
    this.value = value;
  }
}

// 或者不提供默认值，强制使用者指定
class Container<T> {
  value: T;
  
  constructor(value: T) {
    this.value = value;
  }
}