TypeScript泛型

TypeScript泛型

在TypeScript的类型王国中，泛型（Generics）堪称最强大的魔法武器。它像一把精密的瑞士军刀，让开发者能够在保持类型安全的前提下，构建出高度复用且灵活的代码结构。本文将通过层层递进的讲解，揭开泛型的神秘面纱。

一、为什么需要泛型？

想象一个简单的需求：编写一个恒等函数，接收参数并原样返回。在没有泛型时，我们可能需要为每种类型编写重载：

function identityString(arg: string): string { return arg; }
function identityNumber(arg: number): number { return arg; }
// ……需要为每个类型重复定义

当类型系统开始"抱怨"重复代码时，泛型优雅地登场了。它允许我们：

1. 定义可复用的逻辑模板
2. 保留类型信息直至使用时确定
3. 在编译期进行类型安全检查

二、泛型基础语法解析

1. 泛型函数

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

• <T>声明了一个类型参数（Type Parameter）
• T作为占位符，在函数调用时被具体类型替换
• 返回值的类型自动与参数类型保持一致

类型推断的魔力：

const num = identity(42);        // 自动推断为number类型
const str = identity<string>("TS"); // 显式指定类型

2. 多类型参数

function combine<T, K>(a: T, b: K): [T, K] {
  return [a, b];
}

// 使用示例
const result = combine<number, string>(10, "TypeScript");
// result类型被推断为 [number, string]

三、泛型类：构建类型安全的容器

泛型类让我们能创建类型安全的容器模式：

class Box<T> {
  private content: T;

  constructor(value: T) {
    this.content = value;
  }

  getContent(): T {
    return this.content;
  }
}

// 使用示例
const numberBox = new Box<number>(123);
const stringBox = new Box("Hello");

关键特性：

• 类的实例类型与泛型参数绑定
• 成员方法自动继承泛型类型
• 支持类型约束（后续详解）

四、类型约束：给泛型加上安全带

1. 基础约束

interface HasLength {
  length: number;
}

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

// 合法调用
getLength({ length: 10, name: "Demo" }); // 返回10

// 非法调用
getLength(42); // 报错：number没有length属性

2. 交叉类型约束

type ValidType = HasLength & { id: string };

function processData<T extends ValidType>(data: T) {
  console.log(data.id, data.length);
}

五、实战场景解析

场景1：响应式数据容器

class Reactive<T> {
  private _value: T;
  private observers: Set<(value: T) => void> = new Set();

  constructor(initialValue: T) {
    this._value = initialValue;
  }

  get value(): T {
    return this._value;
  }

  set value(newVal: T) {
    this._value = newVal;
    this.observers.forEach(observer => observer(newVal));
  }

  subscribe(observer: (value: T) => void) {
    this.observers.add(observer);
  }
}

场景2：安全的数据转换器

function safeParse<T>(json: string): T | null {
  try {
    return JSON.parse(json);
  } catch {
    return null;
  }
}

// 使用示例
const userData = safeParse<{ id: number; name: string }>(jsonString);

六、泛型进阶技巧

1. 默认类型参数

function createArray<T = string>(length: number): T[] {
  return new Array(length).fill(null) as T[];
}

const nums = createArray(3);      // 默认string[]
const bools = createArray<boolean>(3); // 显式boolean[]

2. 泛型条件类型

type IsString<T> = T extends string ? true : false;

type Test1 = IsString<string>;  // true
type Test2 = IsString<number>;  // false

七、最佳实践指南

1. 保持简单：避免过度复杂的泛型嵌套
2. 合理约束：使用extends保证类型安全
3. 文档注释：为泛型参数添加JSDoc说明
4. 类型推断：优先让TS自动推断类型
5. 工具类型：结合Partial<T>, Pick<T, K>等内置类型

八、总结

泛型是TypeScript类型系统的瑞士军刀，它通过：

• 类型参数化：延迟类型决策至使用阶段
• 类型约束：保证类型安全边界
• 类型复用：消除重复的类型定义

让我们能够编写出既安全又灵活的代码。掌握泛型，就等于掌握了TypeScript类型系统的核心精髓，能够在复杂业务场景中游刃有余地构建类型安全的应用架构。

记住：优秀的泛型设计应该像空气一样——存在时让你呼吸自如，缺失时却让你窒息。在TypeScript的世界里，让泛型成为你代码质量的守护者，而非复杂度的制造者。