从零开始的 TypeScript 十二：装饰器的魅力

前端

2023-10-27 23:58:46

TypeScript 装饰器的奥秘

在编程的世界中，装饰器扮演着魔法师的角色，赋予代码新的能力和特性。在 TypeScript 中，装饰器是一种特殊的声明，可以附加到类声明、方法、属性或参数上，从而修改类的行为和元数据。

装饰器的本质在于它们允许您在不修改原始代码的情况下增强代码的功能。这提供了极大的灵活性，使您能够轻松地扩展和定制代码，而无需陷入修改底层实现的麻烦。

装饰器的类型

TypeScript 中的装饰器有以下四种类型：

类装饰器： 应用于整个类声明，用于修改类的属性和行为。
方法装饰器： 应用于方法声明，用于修改方法的行为。
属性装饰器： 应用于属性声明，用于修改属性的行为。
参数装饰器： 应用于函数或方法的参数，用于修改参数的行为。

装饰器语法

装饰器遵循一种特定的语法，其中 @ 符号引入装饰器本身，后跟装饰器函数或表达式。以下是每种类型的装饰器语法：

类装饰器：

@decoratorName
class ClassName {}

方法装饰器：

class ClassName {
  @decoratorName
  methodName() {}
}

属性装饰器：

class ClassName {
  @decoratorName
  propertyName: type;
}

参数装饰器：

class ClassName {
  methodName(@decoratorName param: type) {}
}

装饰器的用途

装饰器的用途十分广泛，它们可以用来：

日志和调试： 记录方法调用、属性访问和事件。
验证和错误处理： 检查数据有效性并处理异常。
性能优化： 测量方法执行时间并进行优化。
模拟： 模拟方法或类的行为，以便进行测试和调试。
元编程： 在运行时生成和修改代码。

TypeScript 装饰器的示例

让我们通过一个示例来展示 TypeScript 装饰器的强大功能：

// 类装饰器：添加元数据
@metadata({ name: "MyClass" })
class MyClass {}

// 方法装饰器：日志方法调用
function logMethodCall(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function (...args: any[]) {
    console.log(`Calling method ${propertyKey} with args ${args}`);
    return originalMethod.apply(this, args);
  };
}

// 属性装饰器：强制属性为只读
function readOnly(target: any, propertyKey: string) {
  Object.defineProperty(target, propertyKey, {
    writable: false,
    configurable: false,
  });
}

class User {
  @logMethodCall
  sayHello() {
    console.log("Hello!");
  }

  @readOnly
  name: string;
}