TypeScript装饰器模式完全指南掌握这一强大特性让你的代码焕然一新

威震华夏关云长

TypeScript装饰器是一种特殊类型的声明，它可以附加到类声明、方法、访问符、属性或参数上。装饰器使用@expression这种形式，其中expression必须求值为一个函数，该函数会在运行时被调用，被装饰的声明信息作为参数传入。

装饰器是TypeScript中的一项实验性特性，它受到了Python中装饰器的启发，并在Angular、NestJS等现代框架中得到了广泛应用。通过装饰器，我们可以在不修改原有代码的情况下，动态地扩展类的功能，实现代码的复用和关注点分离。

装饰器基础

在TypeScript中，装饰器本质上是一个函数，它接收目标对象（被装饰的元素）作为参数，并可以对其进行修改或扩展。装饰器可以在编译时或运行时执行，这取决于装饰器的类型和配置。

要启用装饰器支持，你需要在tsconfig.json文件中设置experimentalDecorators选项为true：

2. {
3.   "compilerOptions": {
4.     "experimentalDecorators": true,
5.     "emitDecoratorMetadata": true
6.   }
7. }

复制代码

装饰器的基本语法如下：

2. function simpleDecorator(target: any) {
3.   // 装饰器逻辑
4.   console.log("装饰器被调用");
5.   console.log("目标对象:", target);
6. }
8. @simpleDecorator
9. class MyClass {
10.   // 类定义
11. }

复制代码

类装饰器

类装饰器应用于类构造函数，可以用来监视、修改或替换类定义。类装饰器在类声明时执行，而不是在类实例化时执行。

类装饰器的函数签名如下：

2. function classDecorator<T extends { new(...args: any[]): {} }>(constructor: T) {
3.   return class extends constructor {
4.     // 新的类定义
5.   }
6. }

复制代码

下面是一个简单的类装饰器示例：

2. function sealed(constructor: Function) {
3.   Object.seal(constructor);
4.   Object.seal(constructor.prototype);
5.   console.log("类已被密封");
6. }
8. @sealed
9. class BugReport {
10.   type = "report";
11.   title: string;
13.   constructor(t: string) {
14.     this.title = t;
15.   }
16. }
18. // 尝试添加新属性将会失败
19. // BugReport.prototype.newProperty = "test"; // 在严格模式下会报错

复制代码

更复杂的类装饰器可以修改或扩展类的行为：

2. function logClass<T extends { new(...args: any[]): {} }>(constructor: T) {
3.   return class extends constructor {
4.     // 创建新的构造函数
5.     constructor(...args: any[]) {
6.       super(...args);
7.       console.log(`创建 ${constructor.name} 实例，参数: ${args.join(", ")}`);
8.     }
9.   }
10. }
12. @logClass
13. class User {
14.   name: string;
15.   age: number;
17.   constructor(name: string, age: number) {
18.     this.name = name;
19.     this.age = age;
20.   }
22.   greet() {
23.     console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
24.   }
25. }
27. const user = new User("Alice", 30);
28. // 输出: 创建 User 实例，参数: Alice, 30
29. user.greet();
30. // 输出: Hello, my name is Alice and I'm 30 years old.

复制代码

方法装饰器

方法装饰器应用于方法的属性描述符，可以用来监视、修改或替换方法定义。方法装饰器在运行时接收三个参数：

1. 对于静态成员，是类的构造函数；对于实例成员，是类的原型
2. 成员的名称
3. 成员的属性描述符

方法装饰器的函数签名如下：

2. function methodDecorator(
3.   target: Object,
4.   propertyKey: string | symbol,
5.   descriptor: PropertyDescriptor
6. ) {
7.   // 装饰器逻辑
8. }

复制代码

下面是一个简单的方法装饰器示例：

2. function log(
3.   target: Object,
4.   propertyKey: string | symbol,
5.   descriptor: PropertyDescriptor
6. ) {
7.   const originalMethod = descriptor.value;
8.   
9.   descriptor.value = function(...args: any[]) {
10.     console.log(`调用方法 ${propertyKey.toString()}，参数: ${JSON.stringify(args)}`);
11.     const result = originalMethod.apply(this, args);
12.     console.log(`方法 ${propertyKey.toString()} 返回: ${JSON.stringify(result)}`);
13.     return result;
14.   };
15.   
16.   return descriptor;
17. }
19. class Calculator {
20.   @log
21.   add(a: number, b: number): number {
22.     return a + b;
23.   }
24. }
26. const calculator = new Calculator();
27. const result = calculator.add(2, 3);
28. // 输出:
29. // 调用方法 add，参数: [2,3]
30. // 方法 add 返回: 5

复制代码

方法装饰器也可以用于修改方法的访问权限：

2. function readonly(
3.   target: Object,
4.   propertyKey: string | symbol,
5.   descriptor: PropertyDescriptor
6. ) {
7.   descriptor.writable = false;
8.   return descriptor;
9. }
11. class Employee {
12.   private _salary: number = 1000;
13.   
14.   @readonly
15.   get salary(): number {
16.     return this._salary;
17.   }
18. }
20. const employee = new Employee();
21. console.log(employee.salary); // 输出: 1000
23. // 尝试修改getter将会失败
24. // employee.salary = 2000; // 在严格模式下会报错

复制代码

属性装饰器

属性装饰器应用于类的属性，可以用来监视或修改属性的定义。属性装饰器在运行时接收两个参数：

1. 对于静态成员，是类的构造函数；对于实例成员，是类的原型
2. 属性的名称

属性装饰器的函数签名如下：

2. function propertyDecorator(
3.   target: Object,
4.   propertyKey: string | symbol
5. ) {
6.   // 装饰器逻辑
7. }

复制代码

下面是一个简单的属性装饰器示例：

2. function format(formatString: string) {
3.   return function (target: Object, propertyKey: string | symbol) {
4.     let value: string;
5.    
6.     const getter = function() {
7.       return `${formatString} ${value} ${formatString}`;
8.     };
9.    
10.     const setter = function(newVal: string) {
11.       value = newVal;
12.     };
13.    
14.     Object.defineProperty(target, propertyKey, {
15.       get: getter,
16.       set: setter,
17.       enumerable: true,
18.       configurable: true
19.     });
20.   };
21. }
23. class Greeter {
24.   @format("***")
25.   greeting: string;
26. }
28. const greeter = new Greeter();
29. greeter.greeting = "Hello";
30. console.log(greeter.greeting); // 输出: *** Hello ***

复制代码

属性装饰器也可以用于验证属性值：

2. function validateEmail(target: Object, propertyKey: string | symbol) {
3.   let value: string;
4.   
5.   const getter = function() {
6.     return value;
7.   };
8.   
9.   const setter = function(newVal: string) {
10.     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
11.     if (!emailRegex.test(newVal)) {
12.       throw new Error("Invalid email format");
13.     }
14.     value = newVal;
15.   };
16.   
17.   Object.defineProperty(target, propertyKey, {
18.     get: getter,
19.     set: setter,
20.     enumerable: true,
21.     configurable: true
22.   });
23. }
25. class User {
26.   @validateEmail
27.   email: string;
28.   
29.   constructor(email: string) {
30.     this.email = email;
31.   }
32. }
34. const user1 = new User("test@example.com"); // 正确
35. console.log(user1.email); // 输出: test@example.com
37. // const user2 = new User("invalid-email"); // 抛出错误: Invalid email format

复制代码

参数装饰器

参数装饰器应用于方法的参数，可以用来监视方法的参数。参数装饰器在运行时接收三个参数：

1. 对于静态成员，是类的构造函数；对于实例成员，是类的原型
2. 方法的名称
3. 参数在函数参数列表中的索引

参数装饰器的函数签名如下：

2. function parameterDecorator(
3.   target: Object,
4.   propertyKey: string | symbol,
5.   parameterIndex: number
6. ) {
7.   // 装饰器逻辑
8. }

复制代码

下面是一个简单的参数装饰器示例：

2. function logParameter(
3.   target: Object,
4.   propertyKey: string | symbol,
5.   parameterIndex: number
6. ) {
7.   console.log(`参数装饰器被调用`);
8.   console.log(`目标对象:`, target);
9.   console.log(`方法名:`, propertyKey.toString());
10.   console.log(`参数索引:`, parameterIndex);
11. }
13. class UserService {
14.   createUser(
15.     @logParameter name: string,
16.     @logParameter age: number,
17.     email: string
18.   ) {
19.     console.log(`创建用户: ${name}, ${age}, ${email}`);
20.   }
21. }
23. const userService = new UserService();
24. userService.createUser("Alice", 30, "alice@example.com");

复制代码

参数装饰器通常用于依赖注入或参数验证。下面是一个参数验证的示例：

2. function required(target: Object, propertyKey: string | symbol, parameterIndex: number) {
3.   const methodName = propertyKey.toString();
4.   const requiredParameters: number[] = Reflect.getOwnMetadata("required", target, methodName) || [];
5.   requiredParameters.push(parameterIndex);
6.   Reflect.defineMetadata("required", requiredParameters, target, methodName);
7. }
9. function validate(target: any, propertyName: string, descriptor: PropertyDescriptor) {
10.   const method = descriptor.value;
11.   
12.   descriptor.value = function(...args: any[]) {
13.     const requiredParameters: number[] = Reflect.getOwnMetadata("required", target, propertyName) || [];
14.    
15.     for (const parameterIndex of requiredParameters) {
16.       if (args[parameterIndex] === undefined || args[parameterIndex] === null) {
17.         throw new Error(`参数 ${parameterIndex} 是必需的`);
18.       }
19.     }
20.    
21.     return method.apply(this, args);
22.   };
23. }
25. class OrderService {
26.   @validate
27.   createOrder(
28.     @required productId: string,
29.     @required quantity: number,
30.     discount?: number
31.   ) {
32.     console.log(`创建订单: 产品ID=${productId}, 数量=${quantity}, 折扣=${discount || 0}`);
33.   }
34. }
36. const orderService = new OrderService();
37. orderService.createOrder("P123", 2); // 正确
38. // orderService.createOrder("P123"); // 抛出错误: 参数 1 是必需的

复制代码

装饰器工厂

装饰器工厂是一个函数，它返回一个装饰器函数。装饰器工厂允许我们自定义装饰器的行为，通过传递参数来配置装饰器。

装饰器工厂的基本语法如下：

2. function decoratorFactory(config: any) {
3.   return function (target: any) {
4.     // 装饰器逻辑，可以使用config
5.   }
6. }
8. @decoratorFactory({ option1: true, option2: "value" })
9. class MyClass {
10.   // 类定义
11. }

复制代码

下面是一个装饰器工厂的示例：

2. function setAPIVersion(version: string) {
3.   return function (constructor: Function) {
4.     constructor.prototype.apiVersion = version;
5.   };
6. }
8. @setAPIVersion("1.0.0")
9. class API {
10.   // 类定义
11. }
13. const api = new API();
14. console.log((api as any).apiVersion); // 输出: 1.0.0

复制代码

装饰器工厂也可以用于方法装饰器：

2. function logMethod(prefix: string) {
3.   return function (
4.     target: Object,
5.     propertyKey: string | symbol,
6.     descriptor: PropertyDescriptor
7.   ) {
8.     const originalMethod = descriptor.value;
9.    
10.     descriptor.value = function(...args: any[]) {
11.       console.log(`${prefix} - 调用方法 ${propertyKey.toString()}`);
12.       const result = originalMethod.apply(this, args);
13.       console.log(`${prefix} - 方法 ${propertyKey.toString()} 完成`);
14.       return result;
15.     };
16.    
17.     return descriptor;
18.   };
19. }
21. class DataService {
22.   @logMethod("[Data Service]")
23.   fetchData(id: string) {
24.     console.log(`获取数据，ID: ${id}`);
25.     return { id, data: "示例数据" };
26.   }
27. }
29. const dataService = new DataService();
30. const data = dataService.fetchData("123");
31. // 输出:
32. // [Data Service] - 调用方法 fetchData
33. // 获取数据，ID: 123
34. // [Data Service] - 方法 fetchData 完成

复制代码

实际应用场景

装饰器在实际开发中有许多应用场景，下面介绍几个常见的例子。

1. 日志记录

装饰器可以用于自动记录方法的调用和返回值：

2. function log(
3.   target: Object,
4.   propertyKey: string | symbol,
5.   descriptor: PropertyDescriptor
6. ) {
7.   const originalMethod = descriptor.value;
8.   
9.   descriptor.value = function(...args: any[]) {
10.     const start = Date.now();
11.     console.log(`[${new Date().toISOString()}] 调用方法 ${propertyKey.toString()}，参数: ${JSON.stringify(args)}`);
12.    
13.     try {
14.       const result = originalMethod.apply(this, args);
15.       const duration = Date.now() - start;
16.       console.log(`[${new Date().toISOString()}] 方法 ${propertyKey.toString()} 成功完成，耗时: ${duration}ms`);
17.       return result;
18.     } catch (error) {
19.       const duration = Date.now() - start;
20.       console.error(`[${new Date().toISOString()}] 方法 ${propertyKey.toString()} 抛出异常，耗时: ${duration}ms，错误: ${error}`);
21.       throw error;
22.     }
23.   };
24.   
25.   return descriptor;
26. }
28. class ProductService {
29.   @log
30.   getProduct(id: string) {
31.     // 模拟数据库查询
32.     if (id === "invalid") {
33.       throw new Error("产品不存在");
34.     }
35.     return { id, name: "示例产品", price: 99.99 };
36.   }
37. }
39. const productService = new ProductService();
40. productService.getProduct("123"); // 记录成功调用
41. try {
42.   productService.getProduct("invalid"); // 记录异常
43. } catch (error) {
44.   console.log("捕获到异常:", error.message);
45. }

复制代码

2. 权限控制

装饰器可以用于检查用户权限：

2. enum Role {
3.   ADMIN = "admin",
4.   USER = "user",
5.   GUEST = "guest"
6. }
8. function hasRole(role: Role) {
9.   return function (
10.     target: Object,
11.     propertyKey: string | symbol,
12.     descriptor: PropertyDescriptor
13.   ) {
14.     const originalMethod = descriptor.value;
15.    
16.     descriptor.value = function(...args: any[]) {
17.       // 假设用户角色存储在实例的userRole属性中
18.       const userRole = (this as any).userRole;
19.       
20.       if (userRole !== role) {
21.         throw new Error(`权限不足，需要 ${role} 权限`);
22.       }
23.       
24.       return originalMethod.apply(this, args);
25.     };
26.    
27.     return descriptor;
28.   };
29. }
31. class AdminService {
32.   userRole: Role;
33.   
34.   constructor(role: Role) {
35.     this.userRole = role;
36.   }
37.   
38.   @hasRole(Role.ADMIN)
39.   deleteUser(userId: string) {
40.     console.log(`删除用户: ${userId}`);
41.     return { success: true };
42.   }
43. }
45. const adminService = new AdminService(Role.ADMIN);
46. adminService.deleteUser("123"); // 成功
48. const userService = new AdminService(Role.USER);
49. try {
50.   userService.deleteUser("456"); // 抛出错误: 权限不足，需要 admin 权限
51. } catch (error) {
52.   console.log("捕获到异常:", error.message);
53. }

复制代码

3. 性能监控

装饰器可以用于监控方法的执行时间：

2. function measure(
3.   target: Object,
4.   propertyKey: string | symbol,
5.   descriptor: PropertyDescriptor
6. ) {
7.   const originalMethod = descriptor.value;
8.   
9.   descriptor.value = function(...args: any[]) {
10.     const start = performance.now();
11.     const result = originalMethod.apply(this, args);
12.     const end = performance.now();
13.     const duration = end - start;
14.    
15.     console.log(`方法 ${propertyKey.toString()} 执行时间: ${duration.toFixed(2)}ms`);
16.    
17.     // 如果方法返回Promise，等待Promise完成
18.     if (result && typeof result.then === 'function') {
19.       return result.then((res: any) => {
20.         const asyncEnd = performance.now();
21.         const asyncDuration = asyncEnd - start;
22.         console.log(`方法 ${propertyKey.toString()} 总执行时间 (异步): ${asyncDuration.toFixed(2)}ms`);
23.         return res;
24.       });
25.     }
26.    
27.     return result;
28.   };
29.   
30.   return descriptor;
31. }
33. class DataProcessor {
34.   @measure
35.   processSync(data: any[]) {
36.     // 模拟同步处理
37.     let result = 0;
38.     for (let i = 0; i < 1000000; i++) {
39.       result += Math.sqrt(i);
40.     }
41.     return { processed: true, count: data.length };
42.   }
43.   
44.   @measure
45.   async processAsync(data: any[]) {
46.     // 模拟异步处理
47.     return new Promise(resolve => {
48.       setTimeout(() => {
49.         resolve({ processed: true, count: data.length });
50.       }, 100);
51.     });
52.   }
53. }
55. const processor = new DataProcessor();
56. processor.processSync([1, 2, 3]);
57. processor.processAsync([4, 5, 6]);

复制代码

4. 缓存

装饰器可以用于缓存方法的结果，避免重复计算：

2. function cache(
3.   target: Object,
4.   propertyKey: string | symbol,
5.   descriptor: PropertyDescriptor
6. ) {
7.   const originalMethod = descriptor.value;
8.   const cache = new Map<string, any>();
9.   
10.   descriptor.value = function(...args: any[]) {
11.     const key = JSON.stringify(args);
12.    
13.     if (cache.has(key)) {
14.       console.log(`从缓存中获取 ${propertyKey.toString()}(${key})`);
15.       return cache.get(key);
16.     }
17.    
18.     console.log(`计算 ${propertyKey.toString()}(${key})`);
19.     const result = originalMethod.apply(this, args);
20.     cache.set(key, result);
21.     return result;
22.   };
23.   
24.   return descriptor;
25. }
27. class MathService {
28.   @cache
29.   fibonacci(n: number): number {
30.     if (n <= 1) {
31.       return n;
32.     }
33.     return this.fibonacci(n - 1) + this.fibonacci(n - 2);
34.   }
35. }
37. const mathService = new MathService();
38. console.log(mathService.fibonacci(10)); // 计算并缓存
39. console.log(mathService.fibonacci(10)); // 从缓存中获取
40. console.log(mathService.fibonacci(15)); // 计算并缓存
41. console.log(mathService.fibonacci(10)); // 从缓存中获取

复制代码

5. 防抖和节流

装饰器可以用于实现防抖和节流功能：

2. function debounce(delay: number) {
3.   return function (
4.     target: Object,
5.     propertyKey: string | symbol,
6.     descriptor: PropertyDescriptor
7.   ) {
8.     const originalMethod = descriptor.value;
9.     let timeoutId: NodeJS.Timeout | null = null;
10.    
11.     descriptor.value = function(...args: any[]) {
12.       if (timeoutId) {
13.         clearTimeout(timeoutId);
14.       }
15.       
16.       timeoutId = setTimeout(() => {
17.         originalMethod.apply(this, args);
18.         timeoutId = null;
19.       }, delay);
20.     };
21.    
22.     return descriptor;
23.   };
24. }
26. function throttle(delay: number) {
27.   return function (
28.     target: Object,
29.     propertyKey: string | symbol,
30.     descriptor: PropertyDescriptor
31.   ) {
32.     const originalMethod = descriptor.value;
33.     let lastCall = 0;
34.    
35.     descriptor.value = function(...args: any[]) {
36.       const now = Date.now();
37.       
38.       if (now - lastCall >= delay) {
39.         lastCall = now;
40.         originalMethod.apply(this, args);
41.       }
42.     };
43.    
44.     return descriptor;
45.   };
46. }
48. class SearchService {
49.   @debounce(300)
50.   search(query: string) {
51.     console.log(`搜索: ${query}`);
52.     // 实际应用中，这里会调用API进行搜索
53.   }
54.   
55.   @throttle(1000)
56.   logActivity(activity: string) {
57.     console.log(`记录活动: ${activity}`);
58.     // 实际应用中，这里会发送日志到服务器
59.   }
60. }
62. const searchService = new SearchService();
63. searchService.search("a");
64. searchService.search("ap");
65. searchService.search("app");
66. searchService.search("appl");
67. searchService.search("apple"); // 只有最后一次搜索会执行
69. const activityService = new SearchService();
70. activityService.logActivity("点击按钮");
71. activityService.logActivity("滚动页面");
72. activityService.logActivity("输入文本"); // 只有第一次和最后一次活动会记录

复制代码

装饰器元数据

装饰器元数据是TypeScript装饰器的一个高级特性，它允许我们在装饰器中存储和检索额外的信息。要使用元数据，需要安装reflect-metadata库并在应用中导入它：

2. npm install reflect-metadata

复制代码

然后在应用的入口文件中导入：

2. import "reflect-metadata";

复制代码

元数据API提供了几个方法来操作元数据：

• Reflect.defineMetadata(metadataKey, metadataValue, target)
• Reflect.getMetadata(metadataKey, target)
• Reflect.hasMetadata(metadataKey, target)
• Reflect.deleteMetadata(metadataKey, target)
• Reflect.getMetadataKeys(target)
• Reflect.getOwnMetadata(metadataKey, target)
• Reflect.getOwnMetadataKeys(target)

下面是一个使用元数据的示例：

2. function classDecorator(constructor: Function) {
3.   Reflect.defineMetadata("class:version", "1.0.0", constructor);
4. }
6. function methodDecorator(target: Object, propertyKey: string | symbol) {
7.   Reflect.defineMetadata("method:permission", "admin", target, propertyKey);
8. }
10. @classDecorator
11. class UserService {
12.   @methodDecorator
13.   createUser() {
14.     console.log("创建用户");
15.   }
16. }
18. // 获取类元数据
19. const version = Reflect.getMetadata("class:version", UserService);
20. console.log(`类版本: ${version}`); // 输出: 类版本: 1.0.0
22. // 获取方法元数据
23. const permission = Reflect.getMetadata("method:permission", UserService.prototype, "createUser");
24. console.log(`方法权限: ${permission}`); // 输出: 方法权限: admin

复制代码

元数据在依赖注入框架中特别有用，例如：

2. function Injectable() {
3.   return function (constructor: Function) {
4.     Reflect.defineMetadata("injectable", true, constructor);
5.   };
6. }
8. function Inject(token: any) {
9.   return function (target: Object, propertyKey: string | symbol) {
10.     Reflect.defineMetadata("inject:token", token, target, propertyKey);
11.   };
12. }
14. @Injectable()
15. class DatabaseService {
16.   query(sql: string) {
17.     console.log(`执行查询: ${sql}`);
18.     return [{ id: 1, name: "示例数据" }];
19.   }
20. }
22. @Injectable()
23. class UserService {
24.   @Inject(DatabaseService)
25.   private database!: DatabaseService;
26.   
27.   getUsers() {
28.     return this.database.query("SELECT * FROM users");
29.   }
30. }
32. // 模拟依赖注入容器
33. class Container {
34.   private services = new Map<string, any>();
35.   
36.   register<T>(token: new (...args: any[]) => T, instance: T) {
37.     this.services.set(token.name, instance);
38.   }
39.   
40.   resolve<T>(target: new (...args: any[]) => T): T {
41.     const isInjectable = Reflect.getMetadata("injectable", target);
42.     if (!isInjectable) {
43.       throw new Error(`${target.name} 不是可注入的`);
44.     }
45.    
46.     const instance = new target();
47.    
48.     // 获取所有属性
49.     const properties = Object.getOwnPropertyNames(target.prototype);
50.    
51.     for (const property of properties) {
52.       const injectToken = Reflect.getMetadata("inject:token", target.prototype, property);
53.       if (injectToken) {
54.         const dependency = this.services.get(injectToken.name);
55.         if (!dependency) {
56.           throw new Error(`依赖 ${injectToken.name} 未注册`);
57.         }
58.         (instance as any)[property] = dependency;
59.       }
60.     }
61.    
62.     return instance;
63.   }
64. }
66. // 使用容器
67. const container = new Container();
68. container.register(DatabaseService, new DatabaseService());
69. const userService = container.resolve(UserService);
70. const users = userService.getUsers();
71. console.log(users);

复制代码

最佳实践和注意事项

在使用装饰器时，有一些最佳实践和注意事项需要牢记：

1. 装饰器执行顺序

多个装饰器应用于同一声明时，它们的执行顺序如下：

• 对于类装饰器，从下到上执行
• 对于方法/属性/参数装饰器，从左到右执行
• 方法装饰器中，参数装饰器先于方法装饰器执行

示例：

2. function classDecorator1(constructor: Function) {
3.   console.log("类装饰器1");
4. }
6. function classDecorator2(constructor: Function) {
7.   console.log("类装饰器2");
8. }
10. function methodDecorator1(target: Object, propertyKey: string, descriptor: PropertyDescriptor) {
11.   console.log("方法装饰器1");
12. }
14. function methodDecorator2(target: Object, propertyKey: string, descriptor: PropertyDescriptor) {
15.   console.log("方法装饰器2");
16. }
18. function paramDecorator1(target: Object, propertyKey: string, parameterIndex: number) {
19.   console.log("参数装饰器1");
20. }
22. function paramDecorator2(target: Object, propertyKey: string, parameterIndex: number) {
23.   console.log("参数装饰器2");
24. }
26. @classDecorator1
27. @classDecorator2
28. class ExampleClass {
29.   @methodDecorator1
30.   @methodDecorator2
31.   method(
32.     @paramDecorator1 param1: string,
33.     @paramDecorator2 param2: number
34.   ) {
35.     // 方法实现
36.   }
37. }
39. // 输出:
40. // 参数装饰器2
41. // 参数装饰器1
42. // 方法装饰器2
43. // 方法装饰器1
44. // 类装饰器2
45. // 类装饰器1

复制代码

2. 装饰器的性能考虑

装饰器可能会影响应用的性能，特别是在类实例化时。以下是一些优化建议：

• 避免在装饰器中执行重量级操作
• 考虑使用懒加载模式，只在需要时执行装饰器逻辑
• 对于频繁调用的方法，谨慎使用装饰器

示例：

2. // 不好的做法 - 每次实例化时都会执行重量级操作
3. function heavyDecorator(constructor: Function) {
4.   // 模拟重量级操作
5.   for (let i = 0; i < 1000000; i++) {
6.     Math.sqrt(i);
7.   }
8.   console.log("重量级装饰器执行完成");
9. }
11. @heavyDecorator
12. class BadExample {
13.   // 类定义
14. }
16. // 好的做法 - 使用懒加载
17. function lazyHeavyDecorator(constructor: Function) {
18.   let initialized = false;
19.   
20.   return class extends constructor {
21.     constructor(...args: any[]) {
22.       super(...args);
23.       
24.       if (!initialized) {
25.         // 模拟重量级操作
26.         for (let i = 0; i < 1000000; i++) {
27.           Math.sqrt(i);
28.         }
29.         console.log("懒加载重量级装饰器执行完成");
30.         initialized = true;
31.       }
32.     }
33.   };
34. }
36. @lazyHeavyDecorator
37. class GoodExample {
38.   // 类定义
39. }
41. console.log("创建第一个实例");
42. const good1 = new GoodExample(); // 执行重量级操作
43. console.log("创建第二个实例");
44. const good2 = new GoodExample(); // 不执行重量级操作

复制代码

3. 装饰器的可测试性

装饰器可能会使代码更难测试，以下是一些提高可测试性的建议：

• 将装饰器逻辑与业务逻辑分离
• 使用依赖注入来提供装饰器所需的依赖
• 为装饰器编写单元测试

示例：

2. // 不好的做法 - 装饰器与业务逻辑紧密耦合
3. function logBad(target: Object, propertyKey: string, descriptor: PropertyDescriptor) {
4.   const originalMethod = descriptor.value;
5.   
6.   descriptor.value = function(...args: any[]) {
7.     console.log(`调用方法 ${propertyKey}`);
8.     return originalMethod.apply(this, args);
9.   };
10.   
11.   return descriptor;
12. }
14. class BadExample {
15.   @logBad
16.   doSomething() {
17.     // 业务逻辑
18.   }
19. }
21. // 好的做法 - 装饰器与业务逻辑分离
22. interface Logger {
23.   log(message: string): void;
24. }
26. class ConsoleLogger implements Logger {
27.   log(message: string): void {
28.     console.log(message);
29.   }
30. }
32. function logGood(logger: Logger) {
33.   return function (target: Object, propertyKey: string, descriptor: PropertyDescriptor) {
34.     const originalMethod = descriptor.value;
35.    
36.     descriptor.value = function(...args: any[]) {
37.       logger.log(`调用方法 ${propertyKey}`);
38.       return originalMethod.apply(this, args);
39.     };
40.    
41.     return descriptor;
42.   };
43. }
45. class GoodExample {
46.   constructor(private logger: Logger) {}
47.   
48.   @logGood(new ConsoleLogger())
49.   doSomething() {
50.     // 业务逻辑
51.   }
52. }
54. // 测试装饰器
55. class TestLogger implements Logger {
56.   messages: string[] = [];
57.   
58.   log(message: string): void {
59.     this.messages.push(message);
60.   }
61. }
63. describe("logGood装饰器", () => {
64.   it("应该记录方法调用", () => {
65.     const testLogger = new TestLogger();
66.    
67.     // 创建一个测试类并应用装饰器
68.     class TestClass {
69.       @logGood(testLogger)
70.       testMethod() {
71.         return "test result";
72.       }
73.     }
74.    
75.     const instance = new TestClass();
76.     const result = instance.testMethod();
77.    
78.     expect(result).toBe("test result");
79.     expect(testLogger.messages).toContain("调用方法 testMethod");
80.   });
81. });

复制代码

4. 装饰器的错误处理

装饰器中的错误可能会导致应用崩溃，以下是一些错误处理的建议：

• 在装饰器中添加适当的错误处理
• 考虑使用装饰器工厂来提供配置选项
• 记录装饰器中的错误以便调试

示例：

2. function safeMethodDecorator(
3.   target: Object,
4.   propertyKey: string,
5.   descriptor: PropertyDescriptor
6. ) {
7.   const originalMethod = descriptor.value;
8.   
9.   descriptor.value = function(...args: any[]) {
10.     try {
11.       return originalMethod.apply(this, args);
12.     } catch (error) {
13.       console.error(`方法 ${propertyKey} 执行出错:`, error);
14.       // 可以选择重新抛出错误或返回默认值
15.       throw error;
16.     }
17.   };
18.   
19.   return descriptor;
20. }
22. function configurableMethodDecorator(options: { logErrors: boolean, defaultValue?: any }) {
23.   return function (
24.     target: Object,
25.     propertyKey: string,
26.     descriptor: PropertyDescriptor
27.   ) {
28.     const originalMethod = descriptor.value;
29.    
30.     descriptor.value = function(...args: any[]) {
31.       try {
32.         return originalMethod.apply(this, args);
33.       } catch (error) {
34.         if (options.logErrors) {
35.           console.error(`方法 ${propertyKey} 执行出错:`, error);
36.         }
37.         
38.         if (options.defaultValue !== undefined) {
39.           return options.defaultValue;
40.         }
41.         
42.         throw error;
43.       }
44.     };
45.    
46.     return descriptor;
47.   };
48. }
50. class Example {
51.   @safeMethodDecorator
52.   method1() {
53.     throw new Error("测试错误");
54.   }
55.   
56.   @configurableMethodDecorator({ logErrors: true, defaultValue: "默认值" })
57.   method2() {
58.     throw new Error("测试错误");
59.   }
60. }
62. const example = new Example();
63. try {
64.   example.method1();
65. } catch (error) {
66.   console.log("捕获到错误:", error.message);
67. }
69. console.log(example.method2()); // 输出: 默认值

复制代码

5. 装饰器的类型安全

TypeScript的装饰器是实验性特性，类型支持有限。以下是一些提高类型安全的建议：

• 使用泛型来增强装饰器的类型安全性
• 为装饰器参数定义明确的类型
• 使用类型断言和类型守卫来处理类型不确定性

示例：

2. // 不好的做法 - 缺乏类型安全
3. function badDecorator(target: any, key: any, descriptor: any) {
4.   // 装饰器逻辑
5. }
7. // 好的做法 - 使用泛型和明确的类型
8. function goodDecorator<T>(
9.   target: T,
10.   propertyKey: keyof T,
11.   descriptor: TypedPropertyDescriptor<(...args: any[]) => any>
12. ) {
13.   // 装饰器逻辑
14. }
16. // 更好的做法 - 为装饰器参数定义类型
17. interface ValidationOptions {
18.   required?: boolean;
19.   minLength?: number;
20.   pattern?: RegExp;
21. }
23. function validateProperty(options: ValidationOptions) {
24.   return function <T extends Record<string, any>>(
25.     target: T,
26.     propertyKey: keyof T
27.   ) {
28.     let value: any;
29.    
30.     const getter = function() {
31.       return value;
32.     };
33.    
34.     const setter = function(newVal: any) {
35.       if (options.required && (newVal === undefined || newVal === null)) {
36.         throw new Error(`${String(propertyKey)} 是必需的`);
37.       }
38.       
39.       if (options.minLength && typeof newVal === 'string' && newVal.length < options.minLength) {
40.         throw new Error(`${String(propertyKey)} 的最小长度是 ${options.minLength}`);
41.       }
42.       
43.       if (options.pattern && typeof newVal === 'string' && !options.pattern.test(newVal)) {
44.         throw new Error(`${String(propertyKey)} 不符合要求的格式`);
45.       }
46.       
47.       value = newVal;
48.     };
49.    
50.     Object.defineProperty(target, propertyKey, {
51.       get: getter,
52.       set: setter,
53.       enumerable: true,
54.       configurable: true
55.     });
56.   };
57. }
59. class User {
60.   @validateProperty({ required: true, minLength: 3 })
61.   name!: string;
62.   
63.   @validateProperty({ required: true, pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/ })
64.   email!: string;
65. }
67. const user = new User();
68. user.name = "Alice"; // 正确
69. user.email = "alice@example.com"; // 正确
71. try {
72.   user.name = "A"; // 抛出错误: name 的最小长度是 3
73. } catch (error) {
74.   console.log("捕获到错误:", error.message);
75. }
77. try {
78.   user.email = "invalid-email"; // 抛出错误: email 不符合要求的格式
79. } catch (error) {
80.   console.log("捕获到错误:", error.message);
81. }

复制代码

总结

TypeScript装饰器是一种强大的特性，它允许我们在不修改原有代码的情况下，动态地扩展类的功能。通过装饰器，我们可以实现代码的复用和关注点分离，使代码更加清晰、可维护。

在本指南中，我们详细介绍了TypeScript装饰器的各个方面：

1. 装饰器基础：了解了装饰器的基本概念和语法
2. 类装饰器：学习了如何使用装饰器扩展或修改类的行为
3. 方法装饰器：探索了如何监视、修改或替换方法定义
4. 属性装饰器：掌握了如何监视或修改属性的定义
5. 参数装饰器：了解了如何监视方法的参数
6. 装饰器工厂：学习了如何创建可配置的装饰器
7. 实际应用场景：探讨了装饰器在日志记录、权限控制、性能监控、缓存和防抖节流等方面的应用
8. 装饰器元数据：了解了如何使用反射和元数据来增强装饰器的功能
9. 最佳实践和注意事项：学习了如何有效地使用装饰器，避免常见的陷阱

通过掌握TypeScript装饰器，你可以编写更加优雅、可维护和可扩展的代码。装饰器特别适用于框架开发、AOP（面向切面编程）和依赖注入等场景。希望本指南能够帮助你充分利用TypeScript装饰器的强大特性，让你的代码焕然一新。