TypeScript 中的装饰器：提高代码可读性和可维护性-JavaScript中文网-JavaScript教程资源分享门户

在 TypeScript 中，装饰器是一种特殊的语法结构，用于修饰类、方法、属性和参数等成员。装饰器可以在不改变原有代码的情况下，为它们添加额外的功能，从而提高代码的可读性和可维护性。本文将介绍 TypeScript 中的装饰器的使用方法和常见应用场景。

1. 基本用法

在 TypeScript 中，装饰器使用 @ 符号加上装饰器名字来标记需要修饰的成员。以下是一个简单的示例：

// javascriptcn.com 代码示例
function log(target: any, key: string) {
  console.log(`Call ${key} on ${target.constructor.name}`);
}

class MyClass {
  @log
  myMethod() {
    // ...
  }
}

在上面的示例中，我们定义了一个名为 log 的装饰器函数，它会在 MyClass 类的 myMethod 方法被调用时输出一条日志。通过在 myMethod 方法前面加上 @log，我们就成功地给它添加了一个日志功能。

装饰器函数接受两个参数：第一个是目标对象（即被修饰的类、方法、属性或参数），第二个是目标成员的名称。在上面的示例中，target 是 MyClass 类的原型对象，key 是字符串 "myMethod"。

2. 类装饰器

类装饰器用于修饰类本身。它可以在类被实例化之前或之后执行一些操作。以下是一个示例：

function log(target: any) {
  console.log(`Create ${target.name}`);
}

@log
class MyClass {
  // ...
}

在上面的示例中，log 装饰器会在 MyClass 类被定义时输出一条日志。注意，log 装饰器的参数是类本身，而不是类的原型对象。

3. 方法装饰器

方法装饰器用于修饰类的方法。它可以在方法被调用之前或之后执行一些操作。以下是一个示例：

// javascriptcn.com 代码示例
function log(target: any, key: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function (...args: any[]) {
    console.log(`Call ${key} on ${target.constructor.name}`);
    return originalMethod.apply(this, args);
  };
  return descriptor;
}

class MyClass {
  @log
  myMethod() {
    // ...
  }
}

在上面的示例中，log 装饰器会在 myMethod 方法被调用时输出一条日志。它会先保存原始方法，在执行原始方法之前输出日志，然后再返回原始方法的执行结果。

4. 属性装饰器

属性装饰器用于修饰类的属性。它可以在属性被读取或写入之前或之后执行一些操作。以下是一个示例：

// javascriptcn.com 代码示例
function log(target: any, key: string) {
  let value = target[key];
  const getter = function () {
    console.log(`Read ${key} on ${target.constructor.name}`);
    return value;
  };
  const setter = function (newValue: any) {
    console.log(`Write ${key} on ${target.constructor.name}`);
    value = newValue;
  };
  Object.defineProperty(target, key, {
    get: getter,
    set: setter,
  });
}

class MyClass {
  @log
  myProperty = 0;
}

在上面的示例中，log 装饰器会在 myProperty 属性被读取或写入时输出一条日志。它会先保存原始属性的值，在读取或写入时输出日志，然后再返回或设置原始属性的值。

5. 参数装饰器

参数装饰器用于修饰类的方法的参数。它可以在方法被调用之前或之后执行一些操作。以下是一个示例：

// javascriptcn.com 代码示例
function log(target: any, key: string, index: number) {
  console.log(`Call ${key} with arg ${index} on ${target.constructor.name}`);
}

class MyClass {
  myMethod(@log arg1: string, @log arg2: number) {
    // ...
  }
}

在上面的示例中，log 装饰器会在 myMethod 方法被调用时输出两条日志，分别对应两个参数的位置和值。

6. 总结

在 TypeScript 中，装饰器是一种强大的语法结构，它可以帮助我们在不改变原有代码的情况下，为类、方法、属性和参数等成员添加额外的功能，从而提高代码的可读性和可维护性。本文介绍了 TypeScript 中的装饰器的基本用法和常见应用场景，希望能对读者有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/650e0b2f95b1f8cacd76966e