TypeScript中的装饰器，你真的玩转了吗？

2023-12-06 14:36:02

TypeScript作为JavaScript的超集，引入了许多先进特性，其中装饰器就是一项备受瞩目的特性。装饰器是一种元编程技术，可以在不修改类或函数本身的情况下，为它们添加额外的功能。这使得代码更加可扩展、可复用和可维护。

尽管TypeScript中的装饰器仍处于实验性阶段，但其强大的潜力已经吸引了众多开发者的目光。本文将从零开始，带你深入探索TypeScript中的装饰器，让你真正掌握这项开发利器。

TypeScript中的装饰器的本质

装饰器本质上是一个函数，它接受一个类或函数作为参数，并返回一个新的类或函数。这个新的类或函数拥有原有类或函数的功能，同时还增加了装饰器所添加的额外功能。

装饰器的语法

装饰器的语法非常简洁：

@decorator_name
class MyClass {}

其中，@decorator_name表示装饰器函数的名称，MyClass表示要被装饰的类。

装饰器的作用

装饰器可以用来实现各种目的，包括：

添加元数据
修改类或函数的行为
拦截方法调用
提供设计模式的支持

如何编写一个装饰器

编写一个装饰器非常简单，只需遵循以下步骤：

定义一个函数，该函数接受一个类或函数作为参数。
在函数体内，对类或函数进行修改。
返回修改后的类或函数。

TypeScript中的装饰器实例

添加元数据：

function addMetadata(metadata: any) {
  return (target: any) => {
    target.metadata = metadata;
  };
}

@addMetadata({ name: "MyClass" })
class MyClass {}

console.log(MyClass.metadata); // 输出: { name: "MyClass" }

修改类行为：

function readonly(target: any, propertyKey: string) {
  Object.defineProperty(target, propertyKey, {
    writable: false,
  });
}

class MyClass {
  @readonly
  name: string;
}

const instance = new MyClass();
instance.name = "John"; // 报错: Cannot assign to read-only property 'name'

拦截方法调用：

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);
  };
}

class MyClass {
  @logMethodCall
  greet(name: string) {
    console.log(`Hello, ${name}!`);
  }
}

const instance = new MyClass();
instance.greet("Jane"); // 输出: Calling method 'greet' with args: ['Jane']