如何在 TypeScript 中创建自定义装饰器？

在 TypeScript 中，装饰器是一种特殊类型的声明，它可以被附加到类声明，方法，访问符，属性或参数上。装饰器使用 @expression 这种形式，expression 必须计算为一个函数，它会在运行时被调用，被装饰的声明信息作为参数传入。

创建自定义装饰器的步骤：

启用装饰器功能：首先，确保在 tsconfig.json 文件中启用了装饰器功能：

json
{
  "compilerOptions": {
    "experimentalDecorators": true,
    "target": "ES5"
  }
}

编写装饰器函数：装饰器函数可以接收不同的参数，这取决于装饰器是应用于类、方法、属性、参数还是访问器。

类装饰器：接收一个参数，即类的构造函数。

typescript
function ClassDecorator(constructor: Function) {
    console.log("类装饰器调用");
    console.log(constructor);
}

方法装饰器：接收三个参数，分别是目标对象、属性名和属性描述符。

typescript
function MethodDecorator(target: Object, propertyKey: string, descriptor: PropertyDescriptor) {
    console.log("方法装饰器调用");
    console.log(target);
    console.log(propertyKey);
    console.log(descriptor);
}

访问器/属性装饰器：与方法装饰器参数相同。
参数装饰器：接收三个参数，目标对象、方法名和参数在函数参数列表中的索引。

typescript
function ParamDecorator(target: Object, propertyKey: string, index: number) {
    console.log("参数装饰器调用");
    console.log(target);
    console.log(propertyKey);
    console.log(index);
}

应用装饰器：将装饰器应用于相应的类、方法、属性等。

typescript
@ClassDecorator
class ExampleClass {
    @MethodDecorator
    method() {}

    @ParamDecorator
    methodWithParams(@ParamDecorator param1: string) {}
}

示例：

这是一个具体的例子，其中定义了一个类装饰器，它简单地记录类名和它的一些调试信息：

typescript
function LogClassName(target: Function) {
    console.log(`类名是: ${target.name}`);
}

@LogClassName
class MyExampleClass {
    constructor(public name: string) {}
}

let obj = new MyExampleClass("示例类");

在这个例子中，当 MyExampleClass 类被定义时，LogClassName 装饰器被调用，并输出类名 MyExampleClass。

装饰器是 TypeScript 中一个非常强大的特性，允许开发者在保持代码清晰和维护性的同时增强类、方法、属性的行为。

2024年7月20日 11:42 回复

1个答案

创建自定义装饰器的步骤：

示例：

你的答案