什么是装饰器
装饰器是 TypeScript 特有的一种语法，它可以在类、方法、属性等装饰目标上执行一段特定的代码。
使用装饰器可以将代码分离为更小的单元，从而更方便地维护和重用。
TypeScript 中的装饰器
在 TypeScript 中，装饰器是一种特殊的类型，它可以与类、方法、属性等其他语法结构进行组合使用。
类型装饰器
类型装饰器用来处理类类型的声明，它包含一个参数和一个可选参数：
type ClassDecorator = <TFunction extends Function>(target: TFunction) => TFunction | void;
使用类型装饰器，可以在类声明语句前使用 @ 符号引用一个装饰器，例如：
@decorator
class MyClass { }方法装饰器
在 TypeScript 中定义一个方法装饰器，它包含三个参数：
type MethodDecorator = <T>(target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;
使用方法装饰器，可以在方法声明语句前使用 @ 符号引用一个装饰器，例如：
class MyClass {
@decorator
myMethod() { }
}属性装饰器
属性装饰器用于处理类中的属性声明，它包含两个参数：
type PropertyDecorator = (target: Object, propertyKey: string | symbol) => void;
使用属性装饰器，可以在属性声明语句前使用 @ 符号引用一个装饰器，例如：
class MyClass {
@decorator
myProperty: any
}装饰器与类的组合使用
在 TypeScript 中，装饰器经常会和类一起使用，以实现更复杂的功能。下面以一个简单的示例来说明。
示例代码
定义一个装饰器 log，它会在类中的所有方法执行前输出一句 正在执行方法XX 的日志，其中 XX 表示方法名。定义一个类 MyClass，并使用装饰器 log 对其进行装饰。调用该类的 myMethod 方法，观察日志输出。
// javascriptcn.com 代码示例
function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
let originalMethod = descriptor.value;
descriptor.value = function(...args: any[]) {
console.log(`正在执行方法${propertyKey}`);
return originalMethod.apply(this, args);
}
return descriptor;
}
@log
class MyClass {
myMethod() {
console.log('myMethod');
}
}
const myClass = new MyClass();
myClass.myMethod();示例代码解释
在示例代码中，定义了一个名为 log 的装饰器。它接收三个参数，分别是类的原型对象、方法名和方法的属性描述符。装饰器中通过修改方法的属性描述符，将原始的方法执行逻辑保存在一个变量中，并将新的方法逻辑定义为输出一句日志后再调用原始方法。
在类定义中，使用 @log 装饰器对 MyClass 进行了装饰。当调用 myMethod 方法时，将会输出一句日志 正在执行方法myMethod，然后再调用原始方法逻辑。
总结
TypeScript 中的装饰器可以与类、方法、属性等各种语法结构组合使用，以实现更复杂的功能。使用装饰器可以将代码分离为更小的单元，从而更方便地维护和重用。在使用装饰器时应该注意装饰器的作用范围和参数。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/651d574c95b1f8cacd4e6741