在 TypeScript 中,装饰器是一种特殊类型的声明,它可以被附加到类声明,方法,访问符,属性或参数上。装饰器使用 @expression 这种形式,expression 必须计算为一个函数,它会在运行时被调用,被装饰的声明信息作为参数传入。
创建自定义装饰器的步骤:
-
启用装饰器功能:首先,确保在
tsconfig.json
文件中启用了装饰器功能:json{ "compilerOptions": { "experimentalDecorators": true, "target": "ES5" } }
-
编写装饰器函数:装饰器函数可以接收不同的参数,这取决于装饰器是应用于类、方法、属性、参数还是访问器。
- 类装饰器:接收一个参数,即类的构造函数。
typescriptfunction ClassDecorator(constructor: Function) { console.log("类装饰器调用"); console.log(constructor); }
- 方法装饰器:接收三个参数,分别是目标对象、属性名和属性描述符。
typescriptfunction MethodDecorator(target: Object, propertyKey: string, descriptor: PropertyDescriptor) { console.log("方法装饰器调用"); console.log(target); console.log(propertyKey); console.log(descriptor); }
-
访问器/属性装饰器:与方法装饰器参数相同。
-
参数装饰器:接收三个参数,目标对象、方法名和参数在函数参数列表中的索引。
typescriptfunction 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) {} }
示例:
这是一个具体的例子,其中定义了一个类装饰器,它简单地记录类名和它的一些调试信息:
typescriptfunction 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 回复