当前位置：首页 > news >正文

TypeScript 装饰器详解

news 来源：原创 2024/9/19 0:18:43

装饰器

介绍

基本语法

类装饰器

方法装饰器

属性装饰器

参数装饰器

组合装饰器

装饰器工厂

总结

装饰器

介绍

TypeScript 中的装饰器（decorators）是一种特殊类型的声明，可以附加到类声明，方法，属性或参数上，以修改其行为。装饰器在编译阶段被应用，通常用来增强或修改类的行为或属性。

基本语法

在 TypeScript 中，装饰器以 @decoratorName 的形式使用，放置在装饰目标（如类、方法、属性等）的前面。装饰器可以是一个函数，接收不同的参数，具体参数取决于装饰的位置。

类装饰器

类装饰器在类声明之前声明，用来监视、修改或替换类定义。类装饰器可以接收一个参数，这个参数是被装饰的类本身。例如：

function classDecorator(constructor: Function) {console.log('Class decorator called.');
}@classDecorator
class MyClass {// 输出：class implementation
}

上面的 classDecorator 函数就是一个类装饰器，它接收类的构造函数作为参数，并在类被定义时调用。类装饰器可以用来修改类的行为或元数据。

方法装饰器

方法装饰器用来监视、修改或替换方法定义。它接收三个参数：目标对象（对于静态成员是类的构造函数，对于实例成员是类的原型）、方法名和方法的属性描述符。例如：

function methodDecorator(target: any, propertyKey: string, descriptor: PropertyDescriptor) {console.log('Method decorator called.');
}class MyClass {@methodDecoratormyMethod() {// method implementation}
}

属性装饰器

属性装饰器用来监视、修改或替换类属性的定义。它接收两个参数：目标对象和属性名。例如：

function propertyDecorator(target: any, propertyKey: string) {console.log('Property decorator called.');
}class MyClass {@propertyDecoratormyProperty: string;
}

参数装饰器

参数装饰器应用于类构造函数或方法声明中的参数。它接收三个参数：目标对象、方法名或构造函数、参数在函数参数列表中的索引。例如：

function parameterDecorator(target: any, methodName: string, parameterIndex: number) {console.log('Parameter decorator called.');
}class MyClass {myMethod(@parameterDecorator param1: string, @parameterDecorator param2: number) {//方法实现}
}

组合装饰器

装饰器可以组合使用，多个装饰器的执行顺序是从下到上，从右到左。例如：

function decorator1(target: any) {console.log('Decorator1');
}function decorator2(target: any) {console.log('Decorator2');
}@decorator1
@decorator2
class MyClass {// class implementation
}
// 输出：
// Decorator2
// Decorator1

装饰器工厂

装饰器可以接收参数并返回一个函数，以供装饰器在运行时调用。这种情况下被称为装饰器工厂。例如：

function myDecoratorFactory(name: string) {return function (target: any) {console.log(`Decorator called with name: ${name}`);};
}@myDecoratorFactory('TestName')
class MyClass {// class implementation
}
// 输出：
// Decorator called with name: TestName