【TypeScript爆火秘籍】彻底征服装饰器：从入门到实战，让你的代码优雅飞起！

阿拉丁Mr

于 2024-08-17 19:30:00 发布

阅读量285

点赞数 5

文章标签： typescript javascript 前端

本文链接：https://blog.csdn.net/qq_41162289/article/details/141280634

版权

在这个TypeScript日益风靡的编程时代，装饰器（Decorators）作为ES2016提案中的一项强大特性，早已在Angular、NestJS等现代前端及全栈框架中大放异彩。它们如同魔法般，让我们能够以一种声明式的方式修改类和类成员的行为，让代码更加模块化、可重用且易于维护。

一、装饰器初印象：何为装饰器？

装饰器，简单来说，就是一种特殊类型的声明，它能够被附加到类声明、方法、访问器、属性或参数上。首先，让我们澄清一个误区：装饰器并不是TypeScript特有的，但它在TypeScript中得到了完美的支持和应用。

通过装饰器，我们可以在不修改原有代码结构的情况下，给对象动态地添加一些额外的职责。这就像是我们给一间房间进行装修，不需要改变房间的基本结构，却能让它焕然一新。装饰器使用@expression形式，expression必须求值为一个函数，该函数会在运行时被调用，被装饰的声明信息作为参数传入。

二、装饰器的作用：为代码添彩

增加代码的可读性：通过装饰器，我们可以将那些与类、方法、属性等相关的元数据（metadata）以一种更加直观的方式展示出来，使得代码的结构和意图一目了然。
实现功能的模块化：装饰器允许我们将特定的功能封装在独立的函数中，然后通过装饰的方式应用到目标对象上，这样既减少了代码的耦合度，又提高了代码的可重用性。
动态扩展功能：在某些情况下，我们可能需要在运行时根据特定的条件来决定是否给对象添加某些功能。装饰器正是实现这一需求的利器，它允许我们在运行时动态地修改类的行为。

三、示例代码：简单的类装饰器

function logClassCreation(constructor: Function) {  
  return class extends constructor {  
    constructor(...args: any[]) {  
      super(...args);  
      console.log(`类 ${constructor.name} 已被创建`);  
    }  
  };  
}  
  
@logClassCreation  
class MyClass {  
  constructor() {  
    console.log('MyClass 构造函数');  
  }  
}  
  
const instance = new MyClass(); // 控制台输出：类 MyClass 已被创建, MyClass 构造函数

四、装饰器实战：打造你的专属功能

属性装饰器：用于类属性的装饰器，可以用来监视、修改属性的值。

function readonly(target: any, propertyName: string) {  
  Object.defineProperty(target, propertyName, {  
    writable: false,  
    enumerable: true,  
    configurable: true  
  });  
}  
  
class Person {  
  @readonly  
  name: string = 'Alice';  
  
  constructor() {  
    // 尝试修改name属性将抛出TypeError  
    // this.name = 'Bob'; // Uncaught TypeError: Cannot assign to read only property 'name' of object '#<Person>'  
  }  
}

2、方法装饰器：在方法执行前后加入自定义逻辑，如日志记录、权限校验等。

function logMethod(target: any, propertyName: string, descriptor: PropertyDescriptor) {  
  const originalMethod = descriptor.value;  
  descriptor.value = function(...args: any[]) {  
    console.log(`方法 ${propertyName} 开始执行`);  
    const result = originalMethod.apply(this, args);  
    console.log(`方法 ${propertyName} 执行完毕`);  
    return result;  
  };  
}  
  
class Calculator {  
  @logMethod  
  add(a: number, b: number): number {  
    return a + b;  
  }  
}  
  
const calc = new Calculator();  
calc.add(1, 2); // 控制台输出：方法 add 开始执行, 方法 add 执行完毕

权限控制：在开发企业级应用时，权限控制是一个不可或缺的功能。通过方法装饰器，我们可以很容易地实现基于角色的访问控制（RBAC）。

function requiresAuth(roles: string[]): MethodDecorator {  
  return function(target: any, propertyKey: string, descriptor: PropertyDescriptor) {  
    const originalMethod = descriptor.value;  
    descriptor.value = function(...args: any[]) {  
      // 假设有一个方法检查当前用户是否拥有所需的角色  
      if (!checkUserRoles(roles)) {  
        throw new Error('Unauthorized access');  
      }  
      return originalMethod.apply(this, args);  
    };  
  };  
}  
  
// 示例使用  
class DataService {  
  @requiresAuth(['admin', 'manager'])  
  deleteData(): void {  
    // 删除数据的逻辑  
  }  
}

五、进阶使用：装饰器组合与工厂模式

function conditionalDecorator(condition: boolean, trueDecorator: ClassDecorator, falseDecorator?: ClassDecorator) {  
  return function(target: Function) {  
    if (condition) {  
      trueDecorator(target);  
    } else if (falseDecorator) {  
      falseDecorator(target);  
    }  
  };  
}  
  
// 使用条件装饰器  
@conditionalDecorator(true, logClassCreation)  
class ConditionallyLoggedClass {}