装饰器入门：轻松扩展 TypeScript 代码的能力

装饰器是什么？

在 TypeScript 中，装饰器是一种特殊的声明，可以附加到类、方法、属性或参数上，以扩展它们的行为或修改它们的定义。就像给一个平凡的蛋糕添加了炫目的糖衣一样，装饰器能让你的代码更有趣、更灵活。

装饰器通过使用 @ 符号紧跟在要修饰的目标前面来应用，就像是给目标贴上了一个标签。当代码运行到装饰器所标记的目标时，装饰器就会起作用，让你能够在不修改目标代码的情况下增加新的功能或行为。

装饰器的种类

在 TypeScript 中，我们有四种常用的装饰器类型：类装饰器、方法装饰器、属性装饰器和参数装饰器。下面让我们一起来看看它们各自的特点和用途。

类装饰器

类装饰器是应用于类构造函数的装饰器。它接收一个参数，这个参数是被装饰的类本身。你可以使用类装饰器来修改类的行为、添加新的属性或方法，甚至可以完全重写类的定义。

举个例子，假设我们有一个 @logged 装饰器，它会在类被实例化时打印一条日志信息。我们可以这样使用它：

@logged
class Calculator {
  // 类的定义
}

在这个例子中，当我们创建 Calculator 的实例时，装饰器 @logged 就会触发并执行相应的逻辑，比如打印一条日志。

方法装饰器

方法装饰器应用于类中的方法。它可以用来修改方法的行为、拦截方法的调用或者为方法添加额外的功能。

假设我们有一个 @validate 装饰器，它会验证方法的参数是否符合一定的规则。我们可以这样使用它：

class User {
  @validate
  setName(name: string) {
    // 方法的定义
  }
}

在这个例子中，当我们调用 setName 方法时，装饰器 @validate 就会被触发，并对方法的参数进行验证。

属性装饰器

属性装饰器应用于类的属性上。它可以用来修改属性的行为或者给属性添加额外的元数据。

举个例子，假设我们有一个 @readonly 装饰器，它会将属性设置为只读，防止被修改。我们可以这样使用它：

class Person {
  @readonly
  name: string;
}

在这个例子中，装饰器 @readonly 会阻止对 name 属性的修改，保持其只读状态。

参数装饰器

参数装饰器应用于函数或方法的参数上。它可以用来修改参数的行为或者为参数添加额外的元数据。

假设我们有一个 @logParameter 装饰器，它会在方法执行前后记录参数的值。我们可以这样使用它：

class Logger {
  log(@logParameter message: string) {
    // 方法的定义
  }
}

在这个例子中，装饰器 @logParameter 会在调用 log 方法时捕获参数的值，并在方法执行前后进行记录。

装饰器的执行顺序

装饰器的执行顺序是从上到下、从外到内的。也就是说，当一个目标有多个装饰器时，它们会按照从上到下的顺序依次执行。

举个例子，假设我们有以下装饰器：

@decorator1
@decorator2
class MyClass {
  // 类的定义
}

在这个例子中，装饰器 decorator1 会先执行，然后才轮到装饰器 decorator2。这个顺序是非常重要的，因为后面的装饰器可以在前面的装饰器的基础上进行修改。

常见应用场景

现在，我们来看看装饰器在实际开发中的常见应用场景。

日志记录

通过使用装饰器，我们可以轻松地在类或方法的调用前后记录日志信息。这对于调试和监控应用程序非常有用。

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

  descriptor.value = function (...args: any[]) {
    console.log(`调用方法 ${propertyKey}，参数: ${args.join(', ')}`);
    const result = originalMethod.apply(this, args);
    console.log(`方法 ${propertyKey} 执行结果: ${result}`);
    return result;
  };

  return descriptor;
}

class Calculator {
  @log
  add(a: number, b: number) {
    return a + b;
 }
}

const calculator = new Calculator();
calculator.add(2, 3);
// 输出: 调用方法 add，参数: 2, 3
// 方法 add 执行结果: 5

在这个例子中，我们定义了一个 log 装饰器，它会在方法调用前后打印日志信息。

权限控制

通过装饰器，我们可以轻松地实现对类或方法的权限控制。例如，我们可以为某个方法添加一个 @adminOnly 装饰器，只有管理员才能调用该方法。

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

  descriptor.value = function (...args: any[]) {
    if (!isAdmin()) {
      throw new Error('无权访问');
    }

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

  return descriptor;
}

class UserManagement {
  @adminOnly
  deleteUser(userId: string) {
    // 删除用户的逻辑
  }
}

const userManagement = new UserManagement();
userManagement.deleteUser('123'); // 只有管理员才能执行该方法

在这个例子中，我们定义了一个 adminOnly 装饰器，它会在调用方法前检查当前用户是否为管理员。

常见问题与注意事项

使用装饰器时，有一些常见问题和注意事项需要我们注意。

装饰器的传参问题

有些装饰器需要接收参数来定制其行为。但是，装饰器的写法并不直观，我们需要使用额外的函数来返回装饰器本身。

举个例子，假设我们有一个需要接收参数的装饰器 @customDecorator，我们可以这样定义它：

function customDecorator(parameter: any) {
  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    // 装饰器逻辑
  };
}

class Example {
  @customDecorator('参数值')
  method() {
    // 方法的定义
  }
}

在这个例子中，我们定义了一个接收参数的装饰器 customDecorator。在使用时，我们需要调用它并传入参数，返回一个真正的装饰器函数。

装饰器对原始类型的支持问题

装饰器通常用于修饰类、方法或属性，但并不直接支持对原始类型（例如字符串、数字）的装饰。

举个例子，如果我们尝试给一个字符串变量应用装饰器，是不会起作用的：

@decorator
const message = 'Hello, World!';

在这个例子中，装饰器 decorator 不会对字符串变量 message 产生任何影响。装饰器只能应用于类、方法、属性或参数。

总结

装饰器是 TypeScript 强大的特性之一，它可以帮助我们在不修改源代码的情况下扩展和定制类、方法或属性的行为。通过使用装饰器，我们可以轻松地实现日志记录、权限控制等功能。

装饰器是一把双刃剑，用得当可以提升代码的可读性和可维护性，用得不当可能带来一些困惑和问题。因此，在使用装饰器时，务必谨慎并深入理解其原理和用法。

示例代码仅用于说明概念，可能不符合最佳实践。在实际开发中，请根据具体情况进行调整。