在 TypeScript 中，我们可以使用装饰器（decorators）来修改类的行为。装饰器是一种特殊类型的声明，它可以附加到类声明、方法、属性或参数上，以修改类的行为。在本文中，我们将探讨如何在 TypeScript 的 class 中使用装饰器。
什么是装饰器？
装饰器是一种特殊类型的声明，它可以附加到类声明、方法、属性或参数上，以修改类的行为。装饰器使用 @ 符号紧跟着其后面的标识符来表示。
例如：
@decorator
class MyClass {}在上面的例子中，@decorator 就是一个装饰器。
如何定义装饰器？
装饰器可以是一个函数，它接受一个参数，该参数是被装饰的实体。装饰器函数的返回值将会替换被装饰的实体。
例如：
function decorator(target: any) {
// do something with target
return target;
}
@decorator
class MyClass {}在上面的例子中，decorator 函数接受一个参数 target，它代表被装饰的类 MyClass。decorator 函数可以对这个类进行一些操作，比如添加新的属性或方法。最后，decorator 函数返回的对象将会替换原来的类 MyClass。
装饰器的种类
在 TypeScript 中，有四种装饰器可以使用：类装饰器、方法装饰器、属性装饰器和参数装饰器。
类装饰器
类装饰器可以用来修改类的行为。它可以在类声明之前声明，以修改类的定义。类装饰器的函数将会接收一个参数，该参数是被装饰的类的构造函数。
例如：
function classDecorator(constructor: Function) {
console.log("classDecorator");
}
@classDecorator
class MyClass {}在上面的例子中，classDecorator 函数是一个类装饰器，它接受一个参数 constructor，它代表被装饰的类 MyClass 的构造函数。当我们使用 @classDecorator 语法来修饰 MyClass 类时，classDecorator 函数将会被调用。
方法装饰器
方法装饰器可以用来修改类的方法。它可以在方法声明之前声明，以修改方法的定义。方法装饰器的函数将会接收三个参数：被装饰的类的原型、方法的名称和方法的属性描述符。
例如：
function methodDecorator(target: any, methodName: string, descriptor: PropertyDescriptor) {
console.log("methodDecorator");
}
class MyClass {
@methodDecorator
public myMethod() {}
}在上面的例子中，methodDecorator 函数是一个方法装饰器，它接受三个参数：被装饰的类的原型 target、方法的名称 methodName 和方法的属性描述符 descriptor。当我们使用 @methodDecorator 语法来修饰 myMethod 方法时，methodDecorator 函数将会被调用。
属性装饰器
属性装饰器可以用来修改类的属性。它可以在属性声明之前声明，以修改属性的定义。属性装饰器的函数将会接收两个参数：被装饰的类的原型和属性的名称。
例如：
function propertyDecorator(target: any, propertyName: string) {
console.log("propertyDecorator");
}
class MyClass {
@propertyDecorator
public myProperty: string;
}在上面的例子中，propertyDecorator 函数是一个属性装饰器，它接受两个参数：被装饰的类的原型 target 和属性的名称 myProperty。当我们使用 @propertyDecorator 语法来修饰 myProperty 属性时，propertyDecorator 函数将会被调用。
参数装饰器
参数装饰器可以用来修改类的方法参数。它可以在方法参数声明之前声明，以修改参数的定义。参数装饰器的函数将会接收三个参数：被装饰的类的原型、方法的名称和参数的索引。
例如：
function parameterDecorator(target: any, methodName: string, parameterIndex: number) {
console.log("parameterDecorator");
}
class MyClass {
public myMethod(@parameterDecorator myParam: string) {}
}在上面的例子中，parameterDecorator 函数是一个参数装饰器，它接受三个参数：被装饰的类的原型 target、方法的名称 myMethod 和参数的索引 0。当我们使用 @parameterDecorator 语法来修饰 myParam 参数时，parameterDecorator 函数将会被调用。
装饰器的执行顺序
当一个类有多个装饰器时，它们的执行顺序是从下往上的。也就是说，最后一个装饰器先执行，第一个装饰器最后执行。
例如：
// javascriptcn.com 代码示例
function firstDecorator(constructor: Function) {
console.log("firstDecorator");
}
function secondDecorator(constructor: Function) {
console.log("secondDecorator");
}
@firstDecorator
@secondDecorator
class MyClass {}在上面的例子中，secondDecorator 函数先执行，输出 secondDecorator，然后 firstDecorator 函数执行，输出 firstDecorator。
装饰器的使用场景
装饰器可以用来实现很多功能，比如：
- 日志记录
- 性能分析
- 授权检查
- 数据验证
- 缓存
- ...
下面是一个示例代码，它使用类装饰器和方法装饰器来实现一个简单的日志记录器：
// javascriptcn.com 代码示例
function logDecorator(className: string) {
return function (constructor: Function) {
const original = constructor;
const newConstructor = function (...args) {
console.log(`Creating instance of ${className}`);
const result = new original(...args);
console.log(`Instance of ${className} created`);
return result;
};
newConstructor.prototype = original.prototype;
return newConstructor;
};
}
function methodLogDecorator(className: string) {
return function (target: any, methodName: string, descriptor: PropertyDescriptor) {
const originalMethod = descriptor.value;
descriptor.value = function (...args) {
console.log(`Calling ${methodName} of ${className}`);
const result = originalMethod.apply(this, args);
console.log(`Result of ${methodName} is ${result}`);
return result;
};
return descriptor;
};
}
@logDecorator("MyClass")
class MyClass {
constructor(private name: string) {}
@methodLogDecorator("MyClass")
public sayHello() {
console.log(`Hello, ${this.name}`);
return `Hello, ${this.name}`;
}
}
const myClass = new MyClass("John");
myClass.sayHello();在上面的例子中，我们定义了一个类装饰器 logDecorator，它接受一个参数 className，代表被装饰的类的名称。当我们使用 @logDecorator("MyClass") 语法来修饰 MyClass 类时，logDecorator 函数将会被调用。logDecorator 函数返回一个新的构造函数 newConstructor，它会在被装饰的类的构造函数之前和之后分别输出日志。
我们还定义了一个方法装饰器 methodLogDecorator，它接受两个参数 className 和 methodName，代表被装饰的类的名称和方法的名称。当我们使用 @methodLogDecorator("MyClass") 语法来修饰 sayHello 方法时，methodLogDecorator 函数将会被调用。methodLogDecorator 函数返回一个新的属性描述符 descriptor，它会在被装饰的方法之前和之后分别输出日志。
最后，我们创建了一个新的 MyClass 实例，并调用了 sayHello 方法。输出结果如下：
Creating instance of MyClass Calling sayHello of MyClass Hello, John Result of sayHello is Hello, John Instance of MyClass created
总结
在 TypeScript 中，装饰器是一种特殊类型的声明，它可以附加到类声明、方法、属性或参数上，以修改类的行为。装饰器可以用来实现很多功能，比如日志记录、性能分析、授权检查、数据验证、缓存等。在使用装饰器时，我们需要注意装饰器的种类、装饰器的执行顺序以及装饰器的使用场景。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6552e304d2f5e1655dc95bbb