浙江个人网站备案长沙新媒体营销

面试题-TS(八)：什么是装饰器（decorators）？如何在 TypeScript 中使用它们？

在TypeScript中，装饰器（Decorators）是一种用于增强代码功能的特殊类型声明。装饰器提供了一种在类、方法、属性等代码元素上注释或修改的方式，使得我们可以通过装饰器来扩展、修改或监视代码的行为。通过使用装饰器，我们可以在不修改原始代码的情况下，给代码添加新的功能，提高代码的可维护性和灵活性。

一、什么是装饰器？

装饰器是一种特殊类型的声明，它以@符号为前缀，后跟一个表达式，通常是一个函数。装饰器可以附着在类、方法、属性等代码元素上，并在运行时对这些元素进行注释或修改。

在TypeScript中，装饰器的使用主要通过以下两种方式：

1. 类装饰器：装饰类的声明。
2. 方法装饰器、属性装饰器、参数装饰器：装饰类中的方法、属性和参数。

二、如何定义装饰器？

装饰器本质上是一个函数，它接收三个参数：

1. 对于类装饰器，它的参数是类的构造函数。
2. 对于方法装饰器，它的参数是类的原型对象、方法名和方法的属性描述符。
3. 对于属性装饰器，它的参数是类的原型对象和属性名。
4. 对于参数装饰器，它的参数是类的原型对象、方法名和参数的索引。

装饰器函数可以根据这些参数来获取或修改类、方法、属性或参数的信息，并实现相应的功能。

以下是一个简单的装饰器示例，用于在类上添加一个日志：

function logClass(target: Function) {console.log("Class logged: ", target);
}@logClass
class MyClass {// ...
}

在上面的示例中，我们定义了一个装饰器函数logClass，它接收类的构造函数target作为参数，并在控制台输出类的构造函数。然后我们使用装饰器@logClass来装饰MyClass类。

三、如何在 TypeScript 中使用装饰器？

要在TypeScript中使用装饰器，首先需要在tsconfig.json中启用experimentalDecorators选项：

{"compilerOptions": {"experimentalDecorators": true}
}

然后，我们就可以在类、方法、属性和参数上使用装饰器了。

类装饰器

类装饰器是应用于类声明的装饰器。它会在类声明时调用，并接收类的构造函数作为参数。类装饰器通常用于修改或扩展类的行为。

以下是一个简单的类装饰器示例，用于添加一个静态属性：

function addStaticProperty(target: Function) {target.staticProperty = "This is a static property.";
}@addStaticProperty
class MyClass {// ...
}console.log(MyClass.staticProperty); // 输出：This is a static property.

在上面的示例中，我们定义了一个类装饰器addStaticProperty，它在类声明时添加了一个静态属性staticProperty。然后我们使用装饰器@addStaticProperty来装饰MyClass类，并在控制台输出静态属性的值。

方法装饰器

方法装饰器是应用于类方法的装饰器。它会在方法声明时调用，并接收类的原型对象、方法名和方法的属性描述符作为参数。方法装饰器通常用于修改或监视方法的行为。

以下是一个简单的方法装饰器示例，用于添加一个日志：

function logMethod(target: any, methodName: string, descriptor: PropertyDescriptor) {const originalMethod = descriptor.value;descriptor.value = function (...args: any[]) {console.log("Method logged: ", methodName);return originalMethod.apply(this, args);};
}class MyClass {@logMethodgreet(name: string) {return `Hello, ${name}!`;}
}const myClass = new MyClass();
myClass.greet("John"); // 输出：Method logged: greet// 输出：Hello, John!

在上面的示例中，我们定义了一个方法装饰器logMethod，它在方法声明时添加了一个日志功能。然后我们使用装饰器@logMethod来装饰MyClass类的greet方法。

属性装饰器

属性装饰器是应用于类属性的装饰器。它会在属性声明时调用，并接收类的原型对象和属性名作为参数。属性装饰器通常用于修改或监视属性的行为。

以下是一个简单的属性装饰器示例，用于添加一个日志：

function logProperty(target: any, propertyName: string) {let value = target[propertyName];const getter = function () {console.log("Property logged: ", propertyName);return value;};const setter = function (newVal: any) {console.log("Property set: ", propertyName);value = newVal;};Object.defineProperty(target, propertyName, {get: getter,set: setter,});
}class MyClass {@logPropertymessage: string = "Hello";
}const myClass = new MyClass();
console.log(myClass.message); // 输出：Property logged: message// 输出：HellomyClass.message = "World";     // 输出：Property set: message
console.log(myClass.message); // 输出：Property logged: message// 输出：World

在上面的示例中，我们定义了一个属性装饰器logProperty，它在属性声明时添加了一个日志功能。然后我们使用装饰器@logProperty来装饰MyClass类的message属性。

参数装饰器

参数装饰器是应用于类方法参数的装饰器。它会在方法参数声明时调用，并接收类的原型对象、方法名和参数的索引作为参数。参数装饰器通常用于修改或监视方法参数的行为。

以下是一个简单的参数装饰器示例，用于添加一个日志：

function logParameter(target: any, methodName: string, parameterIndex: number) {console.log("Parameter logged: ", methodName, parameterIndex);
}class MyClass {greet(@logParameter name: string) {return `Hello, ${name}!`;}
}const myClass = new MyClass();
myClass.greet("John"); // 输出：Parameter logged: greet 0// 输出：Hello, John!

在上面的示例中，我们定义了一个参数装饰器logParameter，它在方法参数声明时添加了一个日志功能。然后我们使用装饰器@logParameter来装饰MyClass类的greet方法的name参数。

四、装饰器组合

在TypeScript中，我们可以将多个装饰器组合在一起使用。装饰器组合的顺序是从上到下执行的，即从外到内。

以下是一个装饰器组合的示例：

function logClass(target: Function) {console.log("Class logged: ", target);
}function addStaticProperty(target: Function) {target.staticProperty = "This is a static property.";
}@logClass
@addStaticProperty
class MyClass {// ...
}console.log(MyClass.staticProperty); // 输出：This is a static property.

在上面的示例中，我们先使用装饰器@addStaticProperty来装饰MyClass类，然后再使用装饰器@logClass来装饰它。由于装饰器组合的顺序是从外到内执行的，所以先执行的是@addStaticProperty装饰器，再执行的是@logClass装饰器。

五、自定义装饰器

除了使用已有的装饰器，我们还可以自定义装饰器来实现特定的功能。

以下是一个简单的自定义装饰器示例，用于计算方法执行的时间：

function logExecutionTime(target: any, methodName: string, descriptor: PropertyDescriptor) {const originalMethod = descriptor.value;descriptor.value = function (...args: any[]) {console.time(methodName);const result = originalMethod.apply(this, args);console.timeEnd(methodName);return result;};
}class MyClass {@logExecutionTimelongRunningTask() {// 模拟耗时任务for (let i = 0; i < 1000000000; i++) {}}
}const myClass = new MyClass();
myClass.longRunningTask(); // 输出：longRunningTask: 2804.869ms

在上面的示例中，我们定义了一个自定义装饰器logExecutionTime，它在方法执行前后添加了计时功能。然后我们使用装饰器@logExecutionTime来装饰MyClass类的longRunningTask方法。

六、装饰器工厂

装饰器工厂是一个返回装饰器的函数。它可以接收参数，并返回一个装饰器函数。

以下是一个简单的装饰器工厂示例，用于添加一个指定的前缀：

function addPrefix(prefix: string) {return function (target: any, propertyName: string) {const value = target[propertyName];Object.defineProperty(target, propertyName, {get: function () {return prefix + value;},set: function (newVal: any) {value = newVal;},});};
}class MyClass {@addPrefix("Hello, ")message: string = "World";
}const myClass = new MyClass();
console.log(myClass.message); // 输出：Hello, World

在上面的示例中，我们定义了一个装饰器工厂addPrefix，它返回一个装饰器函数，用于在属性的值前面添加指定的前缀。然后我们使用装饰器@addPrefix("Hello, ")来装饰MyClass类的message属性。

七、装饰器的应用场景

装饰器在代码中有许多应用场景。以下是一些常见的用例：

1. 日志记录：在方法或类上添加日志功能，用于记录方法的执行过程和结果。

2. 性能监控：在方法或类上添加性能监控功能，用于计算方法的执行时间。

3. 权限验证：在方法或类上添加权限验证功能，用于检查用户是否有权执行某个操作。

4. 数据验证：在方法或类上添加数据验证功能，用于检查输入数据是否合法。

5. 缓存处理：在方法或类上添加缓存处理功能，用于缓存方法的结果。

总结

在TypeScript中，装饰器是一种用于增强代码功能的特殊类型声明。装饰器提供了一种在类、方法、属性等代码元素上注释或修改的方式，使得我们可以通过装饰器来扩展、修改或监视代码的行为。通过使用装饰器，我们可以在不修改原始代码的情况下，给代码添加新的功能，提高代码的可维护性和灵活性。装饰器有类装饰器、方法装饰器、属性装饰器和参数装饰器等几种类型，每种类型有不同的使用场景和应用方式。让我们充分利用装饰器的优势，提高我们的代码功能和可读性，构建出更健壮和可维护的应用程序。