TypeScript 中如何使用装饰器

装饰器是 TypeScript 中一项非常强大的功能，它可以让我们在不改变类或者方法原有结构的情况下，对其进行一些额外的操作。本文将介绍 TypeScript 中如何使用装饰器，并提供详细的示例代码和指导意义。

什么是装饰器

装饰器是一种特殊的声明，它可以附加到类声明、方法、属性或参数上，以修改类的行为。装饰器使用 @expression 的形式进行声明，其中 expression 指的是装饰器工厂函数。装饰器工厂函数会在运行时被调用，它可以返回一个函数或者一个对象，用于修改类的行为。

装饰器的分类

在 TypeScript 中，装饰器可以分为类装饰器、方法装饰器、属性装饰器和参数装饰器。

类装饰器

类装饰器用来修改类的构造函数。它可以被用来添加新的属性、方法或者修改现有的属性和方法。

// javascriptcn.com 代码示例
// 类装饰器
function logClass(target: any) {
  // 保存原有的构造函数
  const original = target;

  // 创建新的构造函数
  const newConstructor: any = function (...args: any[]) {
    console.log(`Creating instance of ${original.name}`);
    return original.apply(this, args);
  };

  // 复制原有的原型链
  newConstructor.prototype = Object.create(original.prototype);

  // 返回新的构造函数
  return newConstructor;
}

// 使用类装饰器
@logClass
class Person {
  constructor(public name: string) {}
}

const person = new Person('John');
console.log(person.name); // 输出 "John"

上述代码中，我们定义了一个类装饰器 logClass，它会在创建类实例时输出类名。我们使用 @logClass 装饰器来修饰 Person 类。

方法装饰器

方法装饰器用来修改类的方法。它可以被用来添加新的逻辑或者修改现有的逻辑。

// javascriptcn.com 代码示例
// 方法装饰器
function logMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  // 保存原有的方法
  const originalMethod = descriptor.value;

  // 创建新的方法
  descriptor.value = function (...args: any[]) {
    console.log(`Calling method ${propertyKey} with arguments ${args}`);
    return originalMethod.apply(this, args);
  };

  // 返回修改后的方法
  return descriptor;
}

class Person {
  constructor(public name: string) {}

  // 使用方法装饰器
  @logMethod
  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const person = new Person('John');
person.sayHello(); // 输出 "Calling method sayHello with arguments []" 和 "Hello, my name is John"

上述代码中，我们定义了一个方法装饰器 logMethod，它会在调用方法时输出方法名和参数。我们使用 @logMethod 装饰器来修饰 sayHello 方法。

属性装饰器

属性装饰器用来修改类的属性。它可以被用来添加新的属性或者修改现有的属性。

// javascriptcn.com 代码示例
// 属性装饰器
function logProperty(target: any, propertyKey: string) {
  // 保存原有的属性值
  let value = target[propertyKey];

  // 创建新的访问器
  const getter = function() {
    console.log(`Getting value of property ${propertyKey}`);
    return value;
  };
  const setter = function(newValue: any) {
    console.log(`Setting value of property ${propertyKey} to ${newValue}`);
    value = newValue;
  };

  // 重新定义属性
  Object.defineProperty(target, propertyKey, {
    get: getter,
    set: setter,
    enumerable: true,
    configurable: true
  });
}

class Person {
  // 使用属性装饰器
  @logProperty
  name: string;

  constructor(name: string) {
    this.name = name;
  }
}

const person = new Person('John');
console.log(person.name); // 输出 "Getting value of property name" 和 "John"
person.name = 'Tom';
console.log(person.name); // 输出 "Setting value of property name to Tom" 和 "Getting value of property name" 和 "Tom"

上述代码中，我们定义了一个属性装饰器 logProperty，它会在访问或者修改属性时输出属性名和值。我们使用 @logProperty 装饰器来修饰 name 属性。

参数装饰器

参数装饰器用来修改类的参数。它可以被用来添加新的逻辑或者修改现有的逻辑。

// javascriptcn.com 代码示例
// 参数装饰器
function logParameter(target: any, propertyKey: string, parameterIndex: number) {
  console.log(`Parameter ${parameterIndex} of method ${propertyKey} in class ${target.constructor.name}`);
}

class Person {
  constructor(public name: string) {}

  sayHello(@logParameter message: string) {
    console.log(`${message}, my name is ${this.name}`);
  }
}

const person = new Person('John');
person.sayHello('Hi'); // 输出 "Parameter 0 of method sayHello in class Person" 和 "Hi, my name is John"

上述代码中，我们定义了一个参数装饰器 logParameter，它会在调用方法时输出参数的位置和方法名。我们使用 @logParameter 装饰器来修饰 message 参数。

装饰器的执行顺序

在 TypeScript 中，装饰器的执行顺序是从上到下，从外到内的。也就是说，先执行类装饰器，然后执行方法装饰器、属性装饰器和参数装饰器。

总结

本文介绍了 TypeScript 中如何使用装饰器，并提供了详细的示例代码和指导意义。装饰器是一项非常强大的功能，它可以使我们在不改变类或者方法原有结构的情况下，对其进行一些额外的操作。希望读者能够通过本文了解装饰器的基本用法，并能够在实际开发中灵活运用。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653ca46f7d4982a6eb6b3c84