随着 TypeScript 的普及，越来越多的 JavaScript 开发者开始使用它来编写前端应用程序。TypeScript 提供了更好的类型检查和代码提示，从而提高了代码的可维护性和可读性。除此之外，TypeScript 还提供了一种叫做装饰器的语法，可以用来扩展类和方法，让代码更加灵活和可扩展。
什么是装饰器？
装饰器是一种特殊的语法，可以用来修改类和方法的行为。在 TypeScript 中，装饰器是一种特殊的注解，用 @ 符号表示。装饰器可以应用于类、属性、方法和参数等各种元素，用来修改它们的行为。
如何使用装饰器？
使用装饰器非常简单，只需要在要修饰的元素前面加上 @ 符号和装饰器名称即可。例如，我们可以使用 @log 装饰器来记录函数的执行时间：
// javascriptcn.com 代码示例
function log(target: any, name: string, descriptor: PropertyDescriptor) {
const original = descriptor.value;
descriptor.value = function(...args: any[]) {
console.log(`Calling ${name} with`, args);
const result = original.apply(this, args);
console.log(`Result of ${name} is`, result);
return result;
};
return descriptor;
}
class Calculator {
@log
add(a: number, b: number) {
return a + b;
}
}
const calc = new Calculator();
console.log(calc.add(2, 3));
// Output:
// Calling add with [2, 3]
// Result of add is 5
// 5在上面的例子中，我们定义了一个名为 @log 的装饰器，它接受三个参数：target、name 和 descriptor。target 表示被修饰的类或对象，name 表示被修饰的方法名，descriptor 表示被修饰的属性或方法的属性描述符。在 @log 装饰器中，我们修改了 descriptor.value 的行为，使它在执行原始方法之前和之后打印一些日志。
然后，我们把 @log 装饰器应用到 Calculator 类的 add 方法上，这样每次调用 add 方法时就会自动打印一些日志。
装饰器的分类
在 TypeScript 中，装饰器可以分为四种类型：类装饰器、属性装饰器、方法装饰器和参数装饰器。下面分别介绍这四种装饰器的用法和示例代码。
类装饰器
类装饰器是应用于类构造函数的函数，它可以用来修改类的行为。类装饰器接受一个参数，表示被修饰的类本身。下面是一个简单的类装饰器的示例：
// javascriptcn.com 代码示例
function sealed(constructor: Function) {
Object.seal(constructor);
Object.seal(constructor.prototype);
}
@sealed
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}
const greeter = new Greeter("world");
console.log(greeter.greet()); // Output: Hello, world在上面的例子中，我们定义了一个名为 @sealed 的类装饰器，它使用 Object.seal 方法来封闭类的构造函数和原型，防止它们被修改。然后，我们把 @sealed 装饰器应用到 Greeter 类上，这样就可以保证 Greeter 类不会被意外修改。
属性装饰器
属性装饰器是应用于类属性的函数，它可以用来修改属性的行为。属性装饰器接受两个参数，表示被修饰的类的原型和属性名称。下面是一个简单的属性装饰器的示例：
// javascriptcn.com 代码示例
function enumerable(value: boolean) {
return function(target: any, propertyKey: string) {
const descriptor = Object.getOwnPropertyDescriptor(target, propertyKey) || {};
descriptor.enumerable = value;
Object.defineProperty(target, propertyKey, descriptor);
};
}
class Greeter {
@enumerable(false)
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}
const greeter = new Greeter("world");
for (const key in greeter) {
console.log(key); // Output: greet
}在上面的例子中，我们定义了一个名为 @enumerable 的属性装饰器，它接受一个参数 value，表示属性是否可枚举。在 @enumerable 装饰器中，我们使用 Object.getOwnPropertyDescriptor 方法获取属性的描述符，然后修改它的 enumerable 属性，最后使用 Object.defineProperty 方法重新定义属性。然后，我们把 @enumerable(false) 装饰器应用到 Greeter 类的 greeting 属性上，这样就可以使 greeting 属性不可枚举。
方法装饰器
方法装饰器是应用于类方法的函数，它可以用来修改方法的行为。方法装饰器接受三个参数，表示被修饰的类的原型、方法名称和方法的属性描述符。下面是一个简单的方法装饰器的示例：
// javascriptcn.com 代码示例
function log(target: any, name: string, descriptor: PropertyDescriptor) {
const original = descriptor.value;
descriptor.value = function(...args: any[]) {
console.log(`Calling ${name} with`, args);
const result = original.apply(this, args);
console.log(`Result of ${name} is`, result);
return result;
};
return descriptor;
}
class Calculator {
@log
add(a: number, b: number) {
return a + b;
}
}
const calc = new Calculator();
console.log(calc.add(2, 3));
// Output:
// Calling add with [2, 3]
// Result of add is 5
// 5在上面的例子中，我们定义了一个名为 @log 的方法装饰器，它使用 console.log 方法来记录方法的执行时间和结果。在 @log 装饰器中，我们修改了 descriptor.value 的行为，使它在执行原始方法之前和之后打印一些日志。然后，我们把 @log 装饰器应用到 Calculator 类的 add 方法上，这样每次调用 add 方法时就会自动打印一些日志。
参数装饰器
参数装饰器是应用于函数参数的函数，它可以用来修改参数的行为。参数装饰器接受三个参数，表示被修饰的类的原型、方法名称和参数的位置。下面是一个简单的参数装饰器的示例：
// javascriptcn.com 代码示例
function validate(target: any, name: string, index: number) {
const original = target[name];
target[name] = function(...args: any[]) {
const value = args[index];
if (typeof value !== "number" || isNaN(value)) {
throw new Error(`Parameter ${index} must be a number`);
}
return original.apply(this, args);
};
}
class Calculator {
add(a: number, @validate b: number) {
return a + b;
}
}
const calc = new Calculator();
console.log(calc.add(2, 3)); // Output: 5
console.log(calc.add(2, "3" as any)); // Error: Parameter 1 must be a number在上面的例子中，我们定义了一个名为 @validate 的参数装饰器，它用来验证参数是否为数字。在 @validate 装饰器中，我们修改了参数所在的方法的行为，使它在执行原始方法之前先验证参数类型。然后，我们把 @validate 装饰器应用到 Calculator 类的 add 方法的第二个参数上，这样每次调用 add 方法时就会自动验证参数类型。
装饰器的优缺点
使用装饰器可以让代码更加灵活和可扩展，从而提高代码的可维护性和可读性。但是，装饰器也有一些缺点，比如：
- 装饰器可能会导致代码的复杂性增加，从而降低代码的可读性和可维护性。
- 装饰器可能会引入一些副作用，比如修改类的原型或属性，从而导致意外的行为。
- 装饰器可能会影响代码的性能，特别是在装饰器嵌套较深或应用于大量对象时。
因此，我们应该谨慎使用装饰器，避免滥用和过度使用。
总结
装饰器是一种特殊的语法，可以用来修改类和方法的行为。在 TypeScript 中，装饰器可以分为四种类型：类装饰器、属性装饰器、方法装饰器和参数装饰器。使用装饰器可以让代码更加灵活和可扩展，从而提高代码的可维护性和可读性。但是，装饰器也有一些缺点，比如增加代码复杂性、引入副作用和影响性能等。因此，我们应该谨慎使用装饰器，避免滥用和过度使用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656d73a8d2f5e1655d5b675a