前言

TypeScript中的装饰器（Decorator）是一种特殊类型的声明，可以附加到类声明、方法、访问器、属性或参数上，以实现对类及其成员的扩展或修改。装饰器在TypeScript中提供了一种元编程的方式，允许开发者在不修改原有类代码的情况下，动态地添加功能或修改行为。以下是TypeScript装饰器的详细解析：

一、装饰器的类型

TypeScript装饰器主要可以分为以下几类：

  1. 类装饰器：应用于类构造函数，可以用来修改类的行为或元数据。类装饰器接收一个参数，即类的构造函数。
  2. 方法装饰器：应用于类的方法，可以用来修改方法的行为或元数据。方法装饰器接收三个参数：目标对象、方法名和属性描述符。
  3. 属性装饰器：应用于类的属性，可以用来修改属性的行为或元数据。属性装饰器接收两个参数：目标对象和属性名。
  4. 参数装饰器：应用于函数（包括类方法）的参数，可以用来修改函数参数的行为或元数据。参数装饰器接收三个参数：目标对象、方法名和参数索引。
  5. 访问器装饰器：应用于类的访问器（get和set方法），用于修改访问器的行为。访问器装饰器的使用方式与方法装饰器类似。

二、装饰器的使用

要使用TypeScript装饰器，首先需要在tsconfig.json文件中启用experimentalDecorators编译选项，如下所示：

1
2
3
4
5
6
{
  "compilerOptions": {
    "target": "ES5",
    "experimentalDecorators": true
  }
}

三、装饰器的示例

1. 类装饰器示例

1
2
3
4
5
6
7
8
9
10
11
12
13
function LogClass(target: Function) {
  console.log(`New instance of ${target.name} class created.`);
}

@LogClass
class MyClass {
  constructor() {
    console.log("This is MyClass constructor");
  }
}

const instance = new MyClass(); // 控制台输出：New instance of MyClass class created.
                                // This is MyClass constructor

2. 方法装饰器示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function LogMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  console.log(`Method ${propertyKey} of class ${target.constructor.name} is called.`);
}

class MyClass {
  @LogMethod
  myMethod() {
    console.log("This is myMethod");
  }
}

const instance = new MyClass();
instance.myMethod(); // 控制台输出：Method myMethod of class MyClass is called.
                     // This is myMethod

3. 属性装饰器示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function ReadOnly(target: any, key: string) {
  let value = target[key];
  const getter = function() {
    return value;
  };
  const setter = function(newValue: any) {
    console.error(`Cannot set readonly property: ${key}`);
  };
  Object.defineProperty(target, key, {
    get: getter,
    set: setter,
    enumerable: true,
    configurable: true
  });
}

class MyClass {
  @ReadOnly readonly myProperty: string = 'readonly value';
}

const instance = new MyClass();
console.log(instance.myProperty); // 输出：readonly value
instance.myProperty = 'new value'; // 控制台输出：Cannot set readonly property: myProperty

4. 参数装饰器示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function LogParameter(target: Object, key: string, index: number) {
  console.log(`Parameter Decorator: ${key}, index: ${index}`);
}

class MyClass {
  myMethod(@LogParameter param1: string, @LogParameter param2: number) {
    console.log('MyMethod called');
  }
}

const instance = new MyClass();
instance.myMethod('hello', 123);
// 控制台输出：
// Parameter Decorator: myMethod, index: 0
// Parameter Decorator: myMethod, index: 1
// MyMethod called

四、装饰器的特点

  1. 运行时机：装饰器在编译阶段执行，而不是在运行时。它们的主要作用是修改类的定义，而不是类的实例。
  2. 元编程：装饰器提供了一种元编程的方式，允许开发者在不修改原有类代码的情况下，动态地添加功能或修改行为。
  3. 实验性特性：装饰器在TypeScript中是一种实验性特性，可能会在未来的版本中发生变化。因此，在使用时需要谨慎，