TS必备知识点：从装饰器概述到实际应用

2023-09-16 15:44:26

装饰器概述

装饰器本质上是一种函数，在类、方法或属性声明之前使用，用于修改或扩展类、方法或属性的行为。装饰器通过元编程的方式对类进行修改，从而扩展类的功能或改变其行为。

装饰器语法

装饰器在TypeScript中使用@符号后接装饰器函数来实现。装饰器函数的参数是类、方法或属性的元数据。例如，以下示例中我们使用装饰器对一个名为User类的类进行装饰：

@decorator
class User {
  // 类成员
}

装饰器函数可以接收一个或多个参数，参数类型根据装饰器函数的具体实现而定。通常，第一个参数是类的原型对象或类的构造函数，后续的参数可以是类成员的元数据。

装饰器应用场景

装饰器在TypeScript中有着广泛的应用场景，包括：

依赖注入：装饰器可以用于实现依赖注入，通过装饰器自动注入依赖项，简化代码和提高代码的可测试性。
参数验证：装饰器可以用于对方法参数进行验证，确保方法调用时参数满足一定的条件，提高代码的健壮性。
性能优化：装饰器可以用于对方法进行性能优化，例如缓存方法结果或对方法执行时间进行监控。
日志记录：装饰器可以用于对方法执行过程进行日志记录，方便调试和故障排除。

实际应用

以下是一些装饰器的实际应用示例：

使用装饰器实现依赖注入：

class UserService {
  constructor(private http: HttpClient) {}

  getUser(id: number): Promise<User> {
    return this.http.get(`/api/users/${id}`).toPromise();
  }
}

// 创建一个装饰器，用于注入UserService
function Injectable() {
  return (target: any) => {
    target.prototype.userService = new UserService();
  };
}

// 使用装饰器对一个名为MyComponent的组件进行依赖注入
@Injectable()
class MyComponent {
  // 可以在组件中使用注入的UserService
  getUser(id: number) {
    return this.userService.getUser(id);
  }
}

使用装饰器进行参数验证：

function Required() {
  return (target: any, propertyKey: string, parameterIndex: number) => {
    const originalMethod = target[propertyKey];

    target[propertyKey] = function(...args: any[]) {
      if (args[parameterIndex] === undefined) {
        throw new Error(`Parameter ${parameterIndex + 1} is required`);
      }

      return originalMethod.apply(this, args);
    };
  };
}

class User {
  @Required()
  setName(name: string) {
    this.name = name;
  }
}

const user = new User();

// 尝试调用setName方法，没有传入参数
user.setName(); // 抛出错误：Parameter 1 is required

使用装饰器进行性能优化：

function Cache() {
  return (target: any, propertyKey: string, descriptor: PropertyDescriptor) => {
    const originalMethod = descriptor.value;

    descriptor.value = function(...args: any[]) {
      const cacheKey = JSON.stringify(args);
      const cachedResult = this.__cache__[cacheKey];

      if (cachedResult) {
        return cachedResult;
      }

      const result = originalMethod.apply(this, args);
      this.__cache__[cacheKey] = result;

      return result;
    };
  };
}

class User {
  private __cache__: { [key: string]: any } = {};

  @Cache()
  getName(): string {
    // 实际操作，从数据库获取用户名
    return `John Doe`;
  }
}

const user = new User();

// 第一次调用getName方法，从数据库获取用户名
const name1 = user.getName();

// 第二次调用getName方法，从缓存中获取用户名
const name2 = user.getName();

// name1和name2的值相同，因为第二次调用getName方法时，结果被缓存了
console.log(name1 === name2); // true