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

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

到此这篇关于TypeScript入门之利用装饰器扩展代码能力的文章就介绍到这了,更多相关TypeScript装饰器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！