Typescript高级: 泛型 vs 装饰器_java泛型和python 装饰器-优快云博客

泛型 vs 装饰器

我们探索TS中增强代码复用与灵活性的新途径
在TypeScript的世界里，开发者们常常寻求提高代码的可复用性、灵活性和可维护性
泛型和装饰器作为两种强大的工具，各自以独特的方式助力这一目标。
我们探讨如何利用泛型作为装饰器的替代方案，通过丰富的示例，展现泛型在实现代码的动态适应性和抽象化上的强大能力。
同时，比较两者在特定场景下的适用性和局限性，以便开发者在实际项目中作出明智的选择

1 ）泛型回顾

泛型（Generics）允许你在定义函数或类的时候不预先指定具体的类型，而是在使用时由调用者指定

这种机制极大地提高了代码的通用性和重用性，尤其适用于处理多种数据类型但遵循相同逻辑的情况

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

const output = identity<string>("hello"); // output 类型为 string

2 ) 泛型与装饰器的对比

装饰器（Decorators）是一种特殊类型的声明，它可以被附加到类声明、方法、访问器、属性或参数上，用于修改或增强类和类成员的功能

装饰器通过在运行时修改类的行为，提供了强大的元编程能力

@log
class MyClass {
  doSomething() {
    console.log("Doing something...");
  }
}

装饰器和泛型虽有交集，但本质不同：
- 泛型专注于类型层面的抽象和代码复用
- 而装饰器更侧重于行为或功能层面的扩展和修改

3 ) 泛型替代装饰器的场景分析

类型安全的扩展功能
- 当你需要对类或函数添加一些类型相关的功能，而又不想牺牲类型安全时，泛型是更好的选择。
- 例如，一个简单的日志记录装饰器可能会忽略输入输出的类型，
- 而使用泛型函数可以精确记录并处理特定类型的数据
避免运行时开销
- 装饰器会在运行时动态修改类或方法，这可能带来一定的性能开销
- 对于一些简单的类型检查或转换逻辑，使用泛型可以在编译时完成，从而减少运行时负担
代码简洁性
- 在处理高度类型化逻辑时，泛型可以减少重复代码，使代码更加简洁
- 通过定义泛型接口或类，可以实现一种“配置即代码”的模式，替代多个装饰器的堆砌

4 ) 泛型函数替代类装饰器

考虑一个场景，我们原本使用装饰器来为类方法添加缓存逻辑，以减少重复的数据库查询

现在，我们尝试使用泛型函数替代装饰器实现相同的目标

// 原始装饰器示例
function cache<T>(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function (...args: any[]) {
    if (!this.cache[propertyKey]) {
      this.cache[propertyKey] = originalMethod.apply(this, args);
    }
    return this.cache[propertyKey];
  };
  return descriptor;
}

// 使用泛型函数替代
function cachedFetch<T>(fetcher: () => Promise<T>): () => Promise<T> {
  let cache: T | null = null;
  return async function (): Promise<T> {
    if (cache === null) {
      cache = await fetcher();
    }
    return cache;
  };
}

class DataFetcher {
  private data: any;

  constructor() {
    this.data = {};
  }

  @cache
  async fetchData(id: number): Promise<any> {
    // 模拟数据库查询逻辑
    return new Promise((resolve) => setTimeout(() => resolve({ id, data: `Data for ${id}` }), 1000));
  }

  // 使用泛型函数版本
  async fetchDataGeneric(id: number): Promise<any> {
    const fetcher = () => this._fetchDataFromDatabase(id);
    return cachedFetch(fetcher)();
  }

  private async _fetchDataFromDatabase(id: number): Promise<any> {
    // 实际数据库查询逻辑
    return { id, data: `Data for ${id}` };
  }
}