深入探索TypeScript装饰器在实际项目中的强大应用与实战技巧提升代码质量与开发效率

威震华夏关云长

引言

TypeScript作为JavaScript的超集，为开发者提供了静态类型检查和更强大的面向对象编程能力。在TypeScript的众多特性中，装饰器(Decorators)是一个极具潜力的元编程特性，它允许我们在不修改原有代码结构的情况下，动态地为类、方法、属性或参数添加额外的行为。装饰器不仅可以提高代码的可读性和可维护性，还能显著提升开发效率，是现代TypeScript项目中不可或缺的利器。

本文将深入探讨TypeScript装饰器的核心概念、实际应用场景以及实战技巧，帮助开发者充分利用装饰器来提升代码质量与开发效率。

TypeScript装饰器基础

什么是装饰器

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

本质上，装饰器是一个函数，它接收目标对象（类、方法、属性等）作为参数，并可以对其进行修改或扩展。这种模式被称为元编程，即编写可以操作程序的程序。

装饰器的工作原理

装饰器在TypeScript中的工作原理可以简化为以下几个步骤：

1. 定义装饰器函数
2. 使用@符号将装饰器应用到目标上
3. 在编译或运行时，装饰器函数会被调用，并接收相关信息作为参数
4. 装饰器函数可以修改或扩展目标的行为

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

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

复制代码

装饰器的类型

TypeScript支持多种类型的装饰器，每种类型都有其特定的应用场景和参数结构。

类装饰器

类装饰器应用于类构造函数，可以用来监视、修改或替换类定义。类装饰器接收一个参数：类的构造函数。

2. function classDecorator<T extends { new(...args: any[]): {} }>(constructor: T) {
3.   return class extends constructor {
4.     newProperty = "new property";
5.     hello = "override";
6.   }
7. }
9. @classDecorator
10. class Greeter {
11.   property = "property";
12.   hello: string;
13.   constructor(m: string) {
14.     this.hello = m;
15.   }
16. }
18. console.log(new Greeter("world"));

复制代码

方法装饰器

方法装饰器应用于方法定义上，可以用来监视、修改或替换方法定义。方法装饰器接收三个参数：

• 对于静态成员，是类的构造函数；对于实例成员，是类的原型
• 成员的名字
• 成员的属性描述符

2. function methodDecorator(
3.   target: any,
4.   propertyKey: string,
5.   descriptor: PropertyDescriptor
6. ) {
7.   const originalMethod = descriptor.value;
8.   
9.   descriptor.value = function(...args: any[]) {
10.     console.log(`Method ${propertyKey} called with args: ${args}`);
11.     const result = originalMethod.apply(this, args);
12.     console.log(`Method ${propertyKey} returned: ${result}`);
13.     return result;
14.   };
15.   
16.   return descriptor;
17. }
19. class Calculator {
20.   @methodDecorator
21.   add(a: number, b: number): number {
22.     return a + b;
23.   }
24. }
26. const calculator = new Calculator();
27. calculator.add(2, 3);

复制代码

属性装饰器

属性装饰器应用于属性声明上，可以用来监视或修改属性的定义。属性装饰器接收两个参数：

• 对于静态成员，是类的构造函数；对于实例成员，是类的原型
• 成员的名字

2. function propertyDecorator(target: any, propertyKey: string) {
3.   let value: string;
4.   
5.   const getter = function() {
6.     console.log(`Getting value for ${propertyKey}`);
7.     return value;
8.   };
9.   
10.   const setter = function(newVal: string) {
11.     console.log(`Setting value for ${propertyKey} to ${newVal}`);
12.     value = newVal;
13.   };
14.   
15.   Object.defineProperty(target, propertyKey, {
16.     get: getter,
17.     set: setter,
18.     enumerable: true,
19.     configurable: true
20.   });
21. }
23. class User {
24.   @propertyDecorator
25.   public name: string;
26.   
27.   constructor(name: string) {
28.     this.name = name;
29.   }
30. }
32. const user = new User("John Doe");
33. console.log(user.name);
34. user.name = "Jane Smith";

复制代码

参数装饰器

参数装饰器应用于参数声明上，可以用来监视参数的定义。参数装饰器接收三个参数：

• 对于静态成员，是类的构造函数；对于实例成员，是类的原型
• 成员的名字
• 参数在函数参数列表中的索引

2. function parameterDecorator(target: any, propertyKey: string, parameterIndex: number) {
3.   console.log(`Parameter decorator applied to ${propertyKey} at index ${parameterIndex}`);
4. }
6. class UserService {
7.   getUserById(@parameterDecorator id: number) {
8.     console.log(`Fetching user with ID: ${id}`);
9.     return { id, name: "John Doe" };
10.   }
11. }
13. const userService = new UserService();
14. userService.getUserById(123);

复制代码

实际项目应用场景

装饰器在实际项目中有广泛的应用场景，下面我们将探讨几个常见的应用场景，并提供详细的代码示例。

日志记录

日志记录是应用程序开发中的重要环节，装饰器可以优雅地实现日志功能，而不需要在业务逻辑中掺杂日志代码。

2. function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
3.   const originalMethod = descriptor.value;
4.   
5.   descriptor.value = function(...args: any[]) {
6.     const startTime = Date.now();
7.     console.log(`[${new Date().toISOString()}] Calling ${propertyKey} with args:`, args);
8.    
9.     try {
10.       const result = originalMethod.apply(this, args);
11.       const endTime = Date.now();
12.       console.log(`[${new Date().toISOString()}] Method ${propertyKey} completed in ${endTime - startTime}ms`);
13.       return result;
14.     } catch (error) {
15.       console.error(`[${new Date().toISOString()}] Method ${propertyKey} threw error:`, error);
16.       throw error;
17.     }
18.   };
19.   
20.   return descriptor;
21. }
23. class ProductService {
24.   @log
25.   getProduct(id: number) {
26.     // 模拟数据库查询
27.     if (id <= 0) {
28.       throw new Error("Invalid product ID");
29.     }
30.     return { id, name: `Product ${id}`, price: 100 };
31.   }
32.   
33.   @log
34.   saveProduct(product: any) {
35.     // 模拟保存产品
36.     console.log("Saving product to database...");
37.     return { ...product, id: Math.floor(Math.random() * 1000) };
38.   }
39. }
41. const productService = new ProductService();
42. productService.getProduct(123);
43. productService.saveProduct({ name: "New Product", price: 200 });
44. try {
45.   productService.getProduct(-1);
46. } catch (error) {
47.   console.log("Caught expected error:", error.message);
48. }

复制代码

权限控制

在许多应用中，需要对某些方法或端点进行权限控制，装饰器可以很方便地实现这一功能。

2. // 定义角色类型
3. type Role = 'admin' | 'user' | 'guest';
5. // 用户上下文
6. interface UserContext {
7.   id: number;
8.   username: string;
9.   roles: Role[];
10. }
12. // 当前用户上下文（在实际应用中可能来自JWT或会话）
13. const currentUser: UserContext = {
14.   id: 1,
15.   username: 'johndoe',
16.   roles: ['user']
17. };
19. // 权限装饰器工厂
20. function requireRole(...requiredRoles: Role[]) {
21.   return function(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
22.     const originalMethod = descriptor.value;
23.    
24.     descriptor.value = function(...args: any[]) {
25.       // 检查用户是否有所需角色
26.       const hasRequiredRole = requiredRoles.some(role =>
27.         currentUser.roles.includes(role)
28.       );
29.       
30.       if (!hasRequiredRole) {
31.         throw new Error(`Access denied. Required roles: ${requiredRoles.join(', ')}`);
32.       }
33.       
34.       return originalMethod.apply(this, args);
35.     };
36.    
37.     return descriptor;
38.   };
39. }
41. class AdminService {
42.   @requireRole('admin')
43.   deleteUser(userId: number) {
44.     console.log(`User ${userId} deleted by admin`);
45.     return { success: true };
46.   }
47.   
48.   @requireRole('admin', 'user')
49.   updateUserProfile(userId: number, profile: any) {
50.     console.log(`User ${userId} profile updated`);
51.     return { success: true };
52.   }
53.   
54.   @requireRole('guest')
55.   viewPublicContent() {
56.     console.log("Displaying public content");
57.     return { content: "This is public content" };
58.   }
59. }
61. const adminService = new AdminService();
63. // 这些调用会成功，因为当前用户有'user'角色
64. try {
65.   adminService.updateUserProfile(123, { name: "John" });
66.   adminService.viewPublicContent();
67. } catch (error) {
68.   console.error("Error:", error.message);
69. }
71. // 这个调用会失败，因为当前用户没有'admin'角色
72. try {
73.   adminService.deleteUser(456);
74. } catch (error) {
75.   console.error("Error:", error.message);
76. }

复制代码

数据验证

装饰器可以用于实现优雅的数据验证，特别是在处理API请求或表单数据时。

2. // 定义验证规则接口
3. interface ValidationRule {
4.   validate(value: any): boolean;
5.   message: string;
6. }
8. // 必填验证规则
9. const required: ValidationRule = {
10.   validate: (value) => value !== undefined && value !== null && value !== '',
11.   message: 'This field is required'
12. };
14. // 最小长度验证规则
15. function minLength(min: number): ValidationRule {
16.   return {
17.     validate: (value) => value.length >= min,
18.     message: `Minimum length is ${min}`
19.   };
20. }
22. // 邮箱格式验证规则
23. const email: ValidationRule = {
24.   validate: (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
25.   message: 'Invalid email format'
26. };
28. // 验证装饰器工厂
29. function validate(...rules: ValidationRule[]) {
30.   return function(target: any, propertyKey: string) {
31.     let value: any;
32.    
33.     const getter = function() {
34.       return value;
35.     };
36.    
37.     const setter = function(newVal: any) {
38.       for (const rule of rules) {
39.         if (!rule.validate(newVal)) {
40.           throw new Error(`Validation failed for ${propertyKey}: ${rule.message}`);
41.         }
42.       }
43.       value = newVal;
44.     };
45.    
46.     Object.defineProperty(target, propertyKey, {
47.       get: getter,
48.       set: setter,
49.       enumerable: true,
50.       configurable: true
51.     });
52.   };
53. }
55. class UserRegistration {
56.   @validate(required, minLength(3))
57.   username: string;
58.   
59.   @validate(required, email)
60.   email: string;
61.   
62.   @validate(required, minLength(8))
63.   password: string;
64.   
65.   constructor(username: string, email: string, password: string) {
66.     this.username = username;
67.     this.email = email;
68.     this.password = password;
69.   }
70. }
72. // 正确的注册
73. try {
74.   const user1 = new UserRegistration("john_doe", "john@example.com", "password123");
75.   console.log("User registration successful:", user1);
76. } catch (error) {
77.   console.error("Registration error:", error.message);
78. }
80. // 错误的注册 - 用户名太短
81. try {
82.   const user2 = new UserRegistration("jd", "john@example.com", "password123");
83. } catch (error) {
84.   console.error("Registration error:", error.message);
85. }
87. // 错误的注册 - 无效邮箱
88. try {
89.   const user3 = new UserRegistration("john_doe", "invalid-email", "password123");
90. } catch (error) {
91.   console.error("Registration error:", error.message);
92. }

复制代码

依赖注入

依赖注入是现代软件开发中的一种重要设计模式，装饰器在实现依赖注入时非常有用。

2. // 依赖容器
3. class Container {
4.   private services: Map<string, any> = new Map();
5.   
6.   register<T>(name: string, implementation: new (...args: any[]) => T): void {
7.     this.services.set(name, implementation);
8.   }
9.   
10.   resolve<T>(name: string): T {
11.     const implementation = this.services.get(name);
12.     if (!implementation) {
13.       throw new Error(`Service ${name} not found`);
14.     }
15.     return new implementation();
16.   }
17. }
19. // 全局容器实例
20. const container = new Container();
22. // 依赖注入装饰器
23. function inject(serviceName: string) {
24.   return function(target: any, propertyKey: string) {
25.     Object.defineProperty(target, propertyKey, {
26.       get() {
27.         return container.resolve(serviceName);
28.       },
29.       enumerable: true,
30.       configurable: true
31.     });
32.   };
33. }
35. // 定义服务
36. class LoggerService {
37.   log(message: string) {
38.     console.log(`[LOG] ${new Date().toISOString()}: ${message}`);
39.   }
40. }
42. class DatabaseService {
43.   query(sql: string) {
44.     console.log(`Executing query: ${sql}`);
45.     return [{ id: 1, name: "Sample Data" }];
46.   }
47. }
49. // 注册服务
50. container.register('logger', LoggerService);
51. container.register('database', DatabaseService);
53. // 使用依赖注入
54. class UserService {
55.   @inject('logger')
56.   private logger!: LoggerService;
57.   
58.   @inject('database')
59.   private database!: DatabaseService;
60.   
61.   getUser(id: number) {
62.     this.logger.log(`Fetching user with ID: ${id}`);
63.     const results = this.database.query(`SELECT * FROM users WHERE id = ${id}`);
64.     return results[0];
65.   }
66.   
67.   createUser(userData: any) {
68.     this.logger.log(`Creating new user: ${JSON.stringify(userData)}`);
69.     this.database.query(`INSERT INTO users (name, email) VALUES ('${userData.name}', '${userData.email}')`);
70.     return { ...userData, id: Math.floor(Math.random() * 1000) };
71.   }
72. }
74. const userService = new UserService();
75. const user = userService.getUser(1);
76. console.log("Retrieved user:", user);
78. const newUser = userService.createUser({ name: "John Doe", email: "john@example.com" });
79. console.log("Created user:", newUser);

复制代码

性能监控

装饰器可以用于监控方法或函数的性能，帮助开发者识别性能瓶颈。

2. // 性能监控装饰器
3. function performanceMonitor(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
4.   const originalMethod = descriptor.value;
5.   
6.   descriptor.value = function(...args: any[]) {
7.     const start = performance.now();
8.     const result = originalMethod.apply(this, args);
9.     const end = performance.now();
10.     const duration = end - start;
11.    
12.     console.log(`[PERFORMANCE] ${propertyKey} executed in ${duration.toFixed(2)}ms`);
13.    
14.     // 如果执行时间超过阈值，记录警告
15.     if (duration > 100) {
16.       console.warn(`[PERFORMANCE WARNING] ${propertyKey} is slow (${duration.toFixed(2)}ms)`);
17.     }
18.    
19.     return result;
20.   };
21.   
22.   return descriptor;
23. }
25. // 性能监控类装饰器
26. function monitorClassPerformance<T extends { new(...args: any[]): {} }>(constructor: T) {
27.   return class extends constructor {
28.     // 为所有方法添加性能监控
29.     [key: string]: any;
30.    
31.     constructor(...args: any[]) {
32.       super(...args);
33.       
34.       // 获取所有方法（包括继承的方法）
35.       const methods = Object.getOwnPropertyNames(Object.getPrototypeOf(this))
36.         .filter(name => {
37.           const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(this), name);
38.           return typeof descriptor?.value === 'function' && name !== 'constructor';
39.         });
40.       
41.       // 为每个方法添加性能监控
42.       methods.forEach(methodName => {
43.         const originalMethod = (this as any)[methodName];
44.         (this as any)[methodName] = function(...args: any[]) {
45.           const start = performance.now();
46.           const result = originalMethod.apply(this, args);
47.           const end = performance.now();
48.           const duration = end - start;
49.          
50.           console.log(`[PERFORMANCE] ${methodName} executed in ${duration.toFixed(2)}ms`);
51.          
52.           if (duration > 100) {
53.             console.warn(`[PERFORMANCE WARNING] ${methodName} is slow (${duration.toFixed(2)}ms)`);
54.           }
55.          
56.           return result;
57.         };
58.       });
59.     }
60.   };
61. }
63. class DataProcessor {
64.   @performanceMonitor
65.   processSmallData() {
66.     // 模拟快速处理
67.     let sum = 0;
68.     for (let i = 0; i < 1000; i++) {
69.       sum += i;
70.     }
71.     return sum;
72.   }
73.   
74.   @performanceMonitor
75.   processLargeData() {
76.     // 模拟慢速处理
77.     let sum = 0;
78.     for (let i = 0; i < 10000000; i++) {
79.       sum += i;
80.     }
81.     return sum;
82.   }
83. }
85. @monitorClassPerformance
86. class AnotherDataProcessor {
87.   quickOperation() {
88.     return "Done quickly";
89.   }
90.   
91.   slowOperation() {
92.     // 模拟慢速操作
93.     const start = Date.now();
94.     while (Date.now() - start < 200) {
95.       // 等待200ms
96.     }
97.     return "Done slowly";
98.   }
99. }
101. const processor = new DataProcessor();
102. processor.processSmallData();
103. processor.processLargeData();
105. const anotherProcessor = new AnotherDataProcessor();
106. anotherProcessor.quickOperation();
107. anotherProcessor.slowOperation();

复制代码

缓存机制

装饰器可以用于实现方法结果的缓存，避免重复计算或查询，提高性能。

2. // 简单的内存缓存
3. class SimpleCache {
4.   private cache: Map<string, { value: any; expiry: number }> = new Map();
5.   
6.   get(key: string): any | null {
7.     const item = this.cache.get(key);
8.     if (!item) return null;
9.    
10.     if (Date.now() > item.expiry) {
11.       this.cache.delete(key);
12.       return null;
13.     }
14.    
15.     return item.value;
16.   }
17.   
18.   set(key: string, value: any, ttlMs: number = 5000): void {
19.     this.cache.set(key, {
20.       value,
21.       expiry: Date.now() + ttlMs
22.     });
23.   }
24.   
25.   clear(): void {
26.     this.cache.clear();
27.   }
28. }
30. const cache = new SimpleCache();
32. // 缓存装饰器工厂
33. function cacheResult(ttlMs: number = 5000) {
34.   return function(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
35.     const originalMethod = descriptor.value;
36.    
37.     descriptor.value = function(...args: any[]) {
38.       // 生成缓存键
39.       const cacheKey = `${propertyKey}:${JSON.stringify(args)}`;
40.       
41.       // 尝试从缓存获取结果
42.       const cachedResult = cache.get(cacheKey);
43.       if (cachedResult !== null) {
44.         console.log(`[CACHE] Hit for ${propertyKey} with args: ${JSON.stringify(args)}`);
45.         return cachedResult;
46.       }
47.       
48.       // 缓存未命中，执行方法
49.       console.log(`[CACHE] Miss for ${propertyKey} with args: ${JSON.stringify(args)}`);
50.       const result = originalMethod.apply(this, args);
51.       
52.       // 存入缓存
53.       cache.set(cacheKey, result, ttlMs);
54.       
55.       return result;
56.     };
57.    
58.     return descriptor;
59.   };
60. }
62. class FibonacciService {
63.   @cacheResult(10000) // 缓存10秒
64.   fibonacci(n: number): number {
65.     console.log(`Computing fibonacci(${n})...`);
66.     if (n <= 1) return n;
67.     return this.fibonacci(n - 1) + this.fibonacci(n - 2);
68.   }
69.   
70.   @cacheResult()
71.   getUserData(userId: number) {
72.     console.log(`Fetching user data for ID: ${userId}`);
73.     // 模拟API调用
74.     return {
75.       id: userId,
76.       name: `User ${userId}`,
77.       email: `user${userId}@example.com`,
78.       timestamp: Date.now()
79.     };
80.   }
81. }
83. const fibonacciService = new FibonacciService();
85. // 第一次调用会计算
86. console.log("Result:", fibonacciService.fibonacci(10));
88. // 第二次调用会从缓存获取
89. console.log("Result:", fibonacciService.fibonacci(10));
91. // 第一次调用用户数据
92. console.log("User:", fibonacciService.getUserData(123));
94. // 第二次调用用户数据（从缓存获取）
95. console.log("User:", fibonacciService.getUserData(123));
97. // 等待一段时间后再次调用
98. setTimeout(() => {
99.   console.log("After timeout, User:", fibonacciService.getUserData(123));
100. }, 6000);

复制代码

实战技巧与最佳实践

在使用TypeScript装饰器时，有一些技巧和最佳实践可以帮助我们更好地利用这一特性。

装饰器工厂模式

装饰器工厂是一个返回装饰器函数的函数，它允许我们向装饰器传递参数，使装饰器更加灵活和可配置。

2. // 装饰器工厂示例
3. function logWithPrefix(prefix: string) {
4.   // 返回实际的装饰器函数
5.   return function(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
6.     const originalMethod = descriptor.value;
7.    
8.     descriptor.value = function(...args: any[]) {
9.       console.log(`[${prefix}] Starting ${propertyKey}`);
10.       const result = originalMethod.apply(this, args);
11.       console.log(`[${prefix}] Finished ${propertyKey}`);
12.       return result;
13.     };
14.    
15.     return descriptor;
16.   };
17. }
19. class ApiService {
20.   @logWithPrefix("API")
21.   fetchData(endpoint: string) {
22.     console.log(`Fetching data from ${endpoint}`);
23.     return { data: `Data from ${endpoint}` };
24.   }
25.   
26.   @logWithPrefix("AUTH")
27.   authenticate(username: string, password: string) {
28.     console.log(`Authenticating user ${username}`);
29.     return { success: true, token: "fake-jwt-token" };
30.   }
31. }
33. const apiService = new ApiService();
34. apiService.fetchData("/users");
35. apiService.authenticate("admin", "password");

复制代码

装饰器组合

TypeScript允许多个装饰器应用于同一个声明，它们会按照从下到上的顺序组合应用。

2. function first() {
3.   console.log("first(): factory evaluated");
4.   return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
5.     console.log("first(): called");
6.   };
7. }
9. function second() {
10.   console.log("second(): factory evaluated");
11.   return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
12.     console.log("second(): called");
13.   };
14. }
16. function third() {
17.   console.log("third(): factory evaluated");
18.   return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
19.     console.log("third(): called");
20.   };
21. }
23. class ExampleClass {
24.   @first()
25.   @second()
26.   @third()
27.   method() {}
28. }
30. // 输出顺序:
31. // first(): factory evaluated
32. // second(): factory evaluated
33. // third(): factory evaluated
34. // third(): called
35. // second(): called
36. // first(): called

复制代码

装饰器元数据

TypeScript支持通过reflect-metadata库为装饰器添加元数据，这对于实现依赖注入等功能特别有用。

首先，安装reflect-metadata：

2. npm install reflect-metadata

复制代码

然后，在应用入口导入它：

2. import "reflect-metadata";

复制代码

使用元数据的示例：

2. import "reflect-metadata";
4. // 定义元数据键
5. const DESIGN_PARAM_TYPES = "design:paramtypes";
6. const DESIGN_RETURN_TYPE = "design:returntype";
7. const DESIGN_TYPE = "design:type";
9. // 类型装饰器
10. function typeInfo(target: any, propertyKey: string) {
11.   const types = Reflect.getMetadata(DESIGN_TYPE, target, propertyKey);
12.   console.log(`Type of ${propertyKey}: ${types?.name}`);
13.   
14.   const paramTypes = Reflect.getMetadata(DESIGN_PARAM_TYPES, target, propertyKey);
15.   if (paramTypes) {
16.     console.log(`Parameter types for ${propertyKey}:`, paramTypes.map(t => t.name));
17.   }
18.   
19.   const returnType = Reflect.getMetadata(DESIGN_RETURN_TYPE, target, propertyKey);
20.   if (returnType) {
21.     console.log(`Return type for ${propertyKey}: ${returnType.name}`);
22.   }
23. }
25. class UserService {
26.   @typeInfo
27.   name: string;
28.   
29.   @typeInfo
30.   getUser(id: number): string {
31.     return `User ${id}`;
32.   }
33.   
34.   @typeInfo
35.   createUser(name: string, email: string): { id: number; name: string; email: string } {
36.     return { id: Date.now(), name, email };
37.   }
38. }
40. // 输出:
41. // Type of name: String
42. // Type of getUser: Function
43. // Parameter types for getUser: [ 'Number' ]
44. // Return type for getUser: String
45. // Type of createUser: Function
46. // Parameter types for createUser: [ 'String', 'String' ]
47. // Return type for createUser: Object

复制代码

装饰器与反射结合

结合反射API，我们可以创建更强大的装饰器，例如自动序列化和反序列化对象。

2. import "reflect-metadata";
4. // 序列化元数据键
5. const SERIALIZE_KEY = "custom:serialize";
7. // 序列化装饰器
8. function serialize() {
9.   return function(target: any, propertyKey: string) {
10.     Reflect.defineMetadata(SERIALIZE_KEY, true, target, propertyKey);
11.   };
12. }
14. // 序列化工具
15. class SerializationHelper {
16.   static serialize(obj: any): any {
17.     const result: any = {};
18.    
19.     // 获取对象的所有属性
20.     for (const key in obj) {
21.       if (obj.hasOwnProperty(key)) {
22.         // 检查属性是否有序列化元数据
23.         const shouldSerialize = Reflect.getMetadata(SERIALIZE_KEY, obj, key);
24.         
25.         if (shouldSerialize) {
26.           result[key] = obj[key];
27.         }
28.       }
29.     }
30.    
31.     return result;
32.   }
33.   
34.   static deserialize<T>(constructor: new (...args: any[]) => T, data: any): T {
35.     const instance = new constructor();
36.    
37.     // 获取构造函数的所有属性
38.     const properties = Object.getOwnPropertyNames(constructor.prototype);
39.    
40.     for (const key of properties) {
41.       if (key !== "constructor" && data[key] !== undefined) {
42.         // 检查属性是否有序列化元数据
43.         const shouldSerialize = Reflect.getMetadata(SERIALIZE_KEY, constructor.prototype, key);
44.         
45.         if (shouldSerialize) {
46.           instance[key] = data[key];
47.         }
48.       }
49.     }
50.    
51.     return instance;
52.   }
53. }
55. class User {
56.   @serialize()
57.   id: number;
58.   
59.   @serialize()
60.   name: string;
61.   
62.   @serialize()
63.   email: string;
64.   
65.   // 这个属性不会被序列化
66.   password: string;
67.   
68.   constructor(id?: number, name?: string, email?: string, password?: string) {
69.     this.id = id ?? 0;
70.     this.name = name ?? "";
71.     this.email = email ?? "";
72.     this.password = password ?? "";
73.   }
74. }
76. // 创建用户
77. const user = new User(1, "John Doe", "john@example.com", "secret");
79. // 序列化用户
80. const serialized = SerializationHelper.serialize(user);
81. console.log("Serialized user:", serialized);
82. // 输出: Serialized user: { id: 1, name: 'John Doe', email: 'john@example.com' }
84. // 反序列化用户
85. const deserialized = SerializationHelper.deserialize(User, { id: 2, name: "Jane Smith", email: "jane@example.com" });
86. console.log("Deserialized user:", deserialized);
87. // 输出: Deserialized user: User { id: 2, name: 'Jane Smith', email: 'jane@example.com', password: '' }

复制代码

装饰器错误处理

在装饰器中正确处理错误非常重要，特别是在生产环境中。

2. function safeDecorator(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
3.   const originalMethod = descriptor.value;
4.   
5.   descriptor.value = function(...args: any[]) {
6.     try {
7.       // 记录方法调用
8.       console.log(`[SAFE] Calling ${propertyKey} with args:`, args);
9.       
10.       // 执行原始方法
11.       const result = originalMethod.apply(this, args);
12.       
13.       // 处理Promise
14.       if (result && typeof result.then === 'function') {
15.         return result
16.           .then((res: any) => {
17.             console.log(`[SAFE] ${propertyKey} resolved successfully`);
18.             return res;
19.           })
20.           .catch((err: any) => {
21.             console.error(`[SAFE] ${propertyKey} rejected with error:`, err);
22.             // 可以在这里添加错误恢复逻辑或重新抛出错误
23.             throw err;
24.           });
25.       }
26.       
27.       console.log(`[SAFE] ${propertyKey} executed successfully`);
28.       return result;
29.     } catch (error) {
30.       console.error(`[SAFE] Error in ${propertyKey}:`, error);
31.       // 可以在这里添加错误恢复逻辑或重新抛出错误
32.       throw error;
33.     }
34.   };
35.   
36.   return descriptor;
37. }
39. class ServiceWithErrors {
40.   @safeDecorator
41.   synchronousMethod() {
42.     console.log("Executing synchronous method");
43.     if (Math.random() > 0.5) {
44.       throw new Error("Random synchronous error");
45.     }
46.     return "Sync result";
47.   }
48.   
49.   @safeDecorator
50.   asynchronousMethod() {
51.     console.log("Executing asynchronous method");
52.     return new Promise((resolve, reject) => {
53.       setTimeout(() => {
54.         if (Math.random() > 0.5) {
55.           reject(new Error("Random asynchronous error"));
56.         } else {
57.           resolve("Async result");
58.         }
59.       }, 100);
60.     });
61.   }
62. }
64. const service = new ServiceWithErrors();
66. // 测试同步方法
67. for (let i = 0; i < 3; i++) {
68.   try {
69.     console.log(`Sync call ${i + 1}:`, service.synchronousMethod());
70.   } catch (error) {
71.     console.log(`Sync call ${i + 1} failed:`, error.message);
72.   }
73. }
75. // 测试异步方法
76. for (let i = 0; i < 3; i++) {
77.   service.asynchronousMethod()
78.     .then(result => console.log(`Async call ${i + 1}:`, result))
79.     .catch(error => console.log(`Async call ${i + 1} failed:`, error.message));
80. }

复制代码

装饰器与框架集成

许多流行的TypeScript框架和库都广泛使用装饰器，下面我们来看看如何在几个主流框架中使用装饰器。

Angular中的装饰器

Angular是一个广泛使用装饰器的前端框架，几乎所有核心功能都通过装饰器实现。

2. import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
4. // 组件装饰器
5. @Component({
6.   selector: 'app-user-profile',
7.   templateUrl: './user-profile.component.html',
8.   styleUrls: ['./user-profile.component.css']
9. })
10. export class UserProfileComponent implements OnInit {
11.   // 输入属性装饰器
12.   @Input() user: any;
13.   
14.   // 输出事件装饰器
15.   @Output() updateUser = new EventEmitter<any>();
16.   
17.   constructor() { }
18.   
19.   // 生命周期钩子
20.   ngOnInit(): void {
21.     console.log('UserProfileComponent initialized');
22.   }
23.   
24.   // 方法装饰器（自定义）
25.   @log
26.   saveUser() {
27.     this.updateUser.emit(this.user);
28.   }
29. }
31. // 自定义日志装饰器
32. function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
33.   const originalMethod = descriptor.value;
34.   
35.   descriptor.value = function(...args: any[]) {
36.     console.log(`[${target.constructor.name}] Calling ${propertyKey}`);
37.     return originalMethod.apply(this, args);
38.   };
39.   
40.   return descriptor;
41. }

复制代码

NestJS中的装饰器

NestJS是一个用于构建高效、可扩展的Node.js服务器端应用程序的框架，它大量使用装饰器。

2. import { Controller, Get, Post, Body, Param, UseGuards, SetMetadata } from '@nestjs/common';
3. import { UserService } from './user.service';
4. import { CreateUserDto } from './dto/create-user.dto';
5. import { JwtAuthGuard } from '../auth/jwt-auth.guard';
6. import { RolesGuard } from '../auth/roles.guard';
7. import { Roles } from '../auth/roles.decorator';
9. // 控制器装饰器
10. @Controller('users')
11. @UseGuards(JwtAuthGuard, RolesGuard)
12. export class UsersController {
13.   constructor(private readonly userService: UserService) {}
15.   // 路由装饰器
16.   @Get()
17.   @Roles('admin')
18.   findAll() {
19.     return this.userService.findAll();
20.   }
22.   @Get(':id')
23.   @Roles('admin', 'user')
24.   findOne(@Param('id') id: string) {
25.     return this.userService.findOne(id);
26.   }
28.   @Post()
29.   @Roles('admin')
30.   create(@Body() createUserDto: CreateUserDto) {
31.     return this.userService.create(createUserDto);
32.   }
33. }
35. // 自定义角色装饰器
36. export const Roles = (...roles: string[]) => SetMetadata('roles', roles);
38. // 角色守卫
39. import { CanActivate, ExecutionContext } from '@nestjs/common';
40. import { Reflector } from '@nestjs/core';
42. export class RolesGuard implements CanActivate {
43.   constructor(private reflector: Reflector) {}
45.   canActivate(context: ExecutionContext): boolean {
46.     const roles = this.reflector.get<string[]>('roles', context.getHandler());
47.     if (!roles) {
48.       return true;
49.     }
50.    
51.     const request = context.switchToHttp().getRequest();
52.     const user = request.user;
53.    
54.     return roles.some(role => user.roles?.includes(role));
55.   }
56. }

复制代码

TypeORM中的装饰器

TypeORM是一个ORM框架，它使用装饰器来定义实体和关系。

2. import { Entity, PrimaryGeneratedColumn, Column, OneToMany, ManyToOne, JoinColumn } from 'typeorm';
3. import { Post } from './Post';
4. import { Profile } from './Profile';
6. // 实体装饰器
7. @Entity()
8. export class User {
9.   // 主键装饰器
10.   @PrimaryGeneratedColumn()
11.   id: number;
13.   // 列装饰器
14.   @Column()
15.   firstName: string;
17.   @Column()
18.   lastName: string;
20.   @Column({ unique: true })
21.   email: string;
23.   @Column()
24.   @Column({ select: false }) // 不默认查询此列
25.   password: string;
27.   @Column({ type: 'timestamp', default: () => 'CURRENT_TIMESTAMP' })
28.   createdAt: Date;
30.   // 一对多关系装饰器
31.   @OneToMany(() => Post, post => post.author)
32.   posts: Post[];
34.   // 一对一关系装饰器
35.   @ManyToOne(() => Profile, profile => profile.user)
36.   @JoinColumn()
37.   profile: Profile;
38. }
40. @Entity()
41. export class Post {
42.   @PrimaryGeneratedColumn()
43.   id: number;
45.   @Column()
46.   title: string;
48.   @Column('text')
49.   content: string;
51.   // 多对一关系装饰器
52.   @ManyToOne(() => User, user => user.posts)
53.   author: User;
54. }

复制代码

class-validator中的装饰器

class-validator是一个用于对象验证的库，它使用装饰器来定义验证规则。

2. import { validate, IsEmail, IsNotEmpty, Length, IsOptional, IsNumberString } from 'class-validator';
4. export class CreateUserDto {
5.   @IsNotEmpty()
6.   @Length(3, 20)
7.   username: string;
9.   @IsEmail()
10.   email: string;
12.   @IsNotEmpty()
13.   @Length(8, 100)
14.   password: string;
16.   @IsOptional()
17.   @Length(0, 100)
18.   bio?: string;
20.   @IsOptional()
21.   @IsNumberString()
22.   age?: string;
23. }
25. // 使用验证
26. async function createUser(userData: CreateUserDto) {
27.   const user = new CreateUserDto();
28.   user.username = userData.username;
29.   user.email = userData.email;
30.   user.password = userData.password;
31.   user.bio = userData.bio;
32.   user.age = userData.age;
34.   const errors = await validate(user);
35.   if (errors.length > 0) {
36.     console.log('Validation failed. Errors:', errors);
37.     throw new Error('Validation failed');
38.   } else {
39.     console.log('Validation succeeded');
40.     // 保存用户到数据库
41.     return { success: true, user };
42.   }
43. }
45. // 测试验证
46. createUser({
47.   username: 'john_doe',
48.   email: 'john@example.com',
49.   password: 'password123'
50. }).then(console.log).catch(console.error);
52. createUser({
53.   username: 'jd', // 太短
54.   email: 'invalid-email', // 无效邮箱
55.   password: '123', // 太短
56.   age: 'not-a-number' // 不是数字字符串
57. }).then(console.log).catch(console.error);

复制代码

提升代码质量与开发效率的具体案例

让我们通过几个具体的案例，看看装饰器如何在实际项目中提升代码质量和开发效率。

案例1：API请求处理

在处理API请求时，我们通常需要处理错误、验证数据、转换响应等。使用装饰器可以将这些横切关注点与业务逻辑分离。

2. import "reflect-metadata";
4. // 定义错误类型
5. class ApiError extends Error {
6.   constructor(
7.     public statusCode: number,
8.     message: string
9.   ) {
10.     super(message);
11.     this.name = "ApiError";
12.   }
13. }
15. // 路由处理装饰器
16. function routeHandler() {
17.   return function(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
18.     const originalMethod = descriptor.value;
19.    
20.     descriptor.value = async function(req: any, res: any, next: any) {
21.       try {
22.         // 执行原始方法
23.         const result = await originalMethod.apply(this, [req, res, next]);
24.         
25.         // 如果方法返回结果，则发送JSON响应
26.         if (result !== undefined) {
27.           res.json({
28.             success: true,
29.             data: result
30.           });
31.         }
32.       } catch (error) {
33.         // 处理已知错误
34.         if (error instanceof ApiError) {
35.           res.status(error.statusCode).json({
36.             success: false,
37.             message: error.message
38.           });
39.           return;
40.         }
41.         
42.         // 处理未知错误
43.         console.error("Unhandled error:", error);
44.         res.status(500).json({
45.           success: false,
46.           message: "Internal server error"
47.         });
48.       }
49.     };
50.    
51.     return descriptor;
52.   };
53. }
55. // 验证请求体装饰器
56. function validateBody(dtoClass: any) {
57.   return function(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
58.     const originalMethod = descriptor.value;
59.    
60.     descriptor.value = async function(req: any, res: any, next: any) {
61.       try {
62.         // 创建DTO实例
63.         const dto = Object.assign(new dtoClass(), req.body);
64.         
65.         // 验证DTO
66.         const errors = await validate(dto);
67.         if (errors.length > 0) {
68.           throw new ApiError(400, "Invalid request body");
69.         }
70.         
71.         // 将验证后的DTO附加到请求对象
72.         req.validatedBody = dto;
73.         
74.         // 调用原始方法
75.         return originalMethod.apply(this, [req, res, next]);
76.       } catch (error) {
77.         next(error);
78.       }
79.     };
80.    
81.     return descriptor;
82.   };
83. }
85. // 示例DTO
86. import { validate, IsEmail, IsNotEmpty, Length } from 'class-validator';
88. class CreateUserDto {
89.   @IsNotEmpty()
90.   @Length(3, 20)
91.   username: string;
93.   @IsEmail()
94.   email: string;
96.   @IsNotEmpty()
97.   @Length(8, 100)
98.   password: string;
99. }
101. // 用户控制器
102. class UserController {
103.   @routeHandler()
104.   @validateBody(CreateUserDto)
105.   async createUser(req: any, res: any) {
106.     const { username, email, password } = req.validatedBody;
107.    
108.     // 检查用户是否已存在
109.     const existingUser = await findUserByEmail(email);
110.     if (existingUser) {
111.       throw new ApiError(409, "User with this email already exists");
112.     }
113.    
114.     // 创建用户
115.     const user = await saveUser({ username, email, password });
116.    
117.     // 返回用户数据（不包含密码）
118.     const { password: _, ...userWithoutPassword } = user;
119.     return userWithoutPassword;
120.   }
121.   
122.   @routeHandler()
123.   async getUser(req: any, res: any) {
124.     const userId = parseInt(req.params.id);
125.    
126.     if (isNaN(userId)) {
127.       throw new ApiError(400, "Invalid user ID");
128.     }
129.    
130.     const user = await findUserById(userId);
131.     if (!user) {
132.       throw new ApiError(404, "User not found");
133.     }
134.    
135.     const { password: _, ...userWithoutPassword } = user;
136.     return userWithoutPassword;
137.   }
138. }
140. // 模拟数据库函数
141. async function findUserByEmail(email: string) {
142.   // 模拟数据库查询
143.   return null;
144. }
146. async function findUserById(id: number) {
147.   // 模拟数据库查询
148.   if (id === 1) {
149.     return {
150.       id: 1,
151.       username: "john_doe",
152.       email: "john@example.com",
153.       password: "hashed_password"
154.     };
155.   }
156.   return null;
157. }
159. async function saveUser(userData: any) {
160.   // 模拟保存用户
161.   return {
162.     id: Math.floor(Math.random() * 1000),
163.     ...userData
164.   };
165. }
167. // 模拟Express请求处理
168. async function simulateRequest(controller: any, method: string, req: any) {
169.   const res = {
170.     json: (data: any) => console.log("Response:", JSON.stringify(data, null, 2)),
171.     status: (code: number) => {
172.       console.log(`Status: ${code}`);
173.       return res;
174.     }
175.   };
176.   
177.   const next = (error: any) => {
178.     console.log("Error:", error.message);
179.   };
180.   
181.   try {
182.     await controller[method](req, res, next);
183.   } catch (error) {
184.     next(error);
185.   }
186. }
188. // 测试用例
189. const userController = new UserController();
191. // 测试创建用户 - 成功
192. console.log("\n=== Test 1: Create user (success) ===");
193. simulateRequest(userController, "createUser", {
194.   body: {
195.     username: "john_doe",
196.     email: "john@example.com",
197.     password: "password123"
198.   }
199. });
201. // 测试创建用户 - 验证失败
202. console.log("\n=== Test 2: Create user (validation failure) ===");
203. simulateRequest(userController, "createUser", {
204.   body: {
205.     username: "jd", // 太短
206.     email: "invalid-email", // 无效邮箱
207.     password: "123" // 太短
208.   }
209. });
211. // 测试获取用户 - 成功
212. console.log("\n=== Test 3: Get user (success) ===");
213. simulateRequest(userController, "getUser", {
214.   params: { id: "1" }
215. });
217. // 测试获取用户 - 无效ID
218. console.log("\n=== Test 4: Get user (invalid ID) ===");
219. simulateRequest(userController, "getUser", {
220.   params: { id: "invalid" }
221. });
223. // 测试获取用户 - 不存在
224. console.log("\n=== Test 5: Get user (not found) ===");
225. simulateRequest(userController, "getUser", {
226.   params: { id: "999" }
227. });

复制代码

案例2：数据库事务管理

在处理数据库操作时，事务管理是一个重要的横切关注点。使用装饰器可以优雅地实现事务管理。

2. import "reflect-metadata";
4. // 事务元数据键
5. const TRANSACTION_KEY = "custom:transaction";
7. // 事务装饰器
8. function transactional() {
9.   return function(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
10.     const originalMethod = descriptor.value;
11.    
12.     descriptor.value = async function(...args: any[]) {
13.       // 开始事务
14.       const transaction = await this.beginTransaction();
15.       console.log(`[TRANSACTION] Started for ${propertyKey}`);
16.       
17.       try {
18.         // 将事务附加到当前实例，以便其他方法使用
19.         Reflect.defineMetadata(TRANSACTION_KEY, transaction, this);
20.         
21.         // 执行原始方法
22.         const result = await originalMethod.apply(this, args);
23.         
24.         // 提交事务
25.         await this.commitTransaction(transaction);
26.         console.log(`[TRANSACTION] Committed for ${propertyKey}`);
27.         
28.         return result;
29.       } catch (error) {
30.         // 回滚事务
31.         await this.rollbackTransaction(transaction);
32.         console.log(`[TRANSACTION] Rolled back for ${propertyKey}`);
33.         
34.         // 重新抛出错误
35.         throw error;
36.       } finally {
37.         // 清除事务元数据
38.         Reflect.deleteMetadata(TRANSACTION_KEY, this);
39.       }
40.     };
41.    
42.     return descriptor;
43.   };
44. }
46. // 获取当前事务的辅助函数
47. function getCurrentTransaction(target: any) {
48.   return Reflect.getMetadata(TRANSACTION_KEY, target);
49. }
51. // 模拟数据库服务
52. class DatabaseService {
53.   private transactions: Map<string, any> = new Map();
54.   
55.   async beginTransaction() {
56.     const id = `tx_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
57.     const transaction = { id, committed: false, rolledBack: false };
58.     this.transactions.set(id, transaction);
59.     console.log(`[DB] Begin transaction: ${id}`);
60.     return transaction;
61.   }
62.   
63.   async commitTransaction(transaction: any) {
64.     if (transaction.rolledBack) {
65.       throw new Error("Cannot commit a rolled back transaction");
66.     }
67.    
68.     transaction.committed = true;
69.     console.log(`[DB] Commit transaction: ${transaction.id}`);
70.   }
71.   
72.   async rollbackTransaction(transaction: any) {
73.     if (transaction.committed) {
74.       throw new Error("Cannot rollback a committed transaction");
75.     }
76.    
77.     transaction.rolledBack = true;
78.     console.log(`[DB] Rollback transaction: ${transaction.id}`);
79.   }
80.   
81.   async query(sql: string, params: any[] = [], transaction?: any) {
82.     const txId = transaction ? ` (tx: ${transaction.id})` : "";
83.     console.log(`[DB] Executing query${txId}: ${sql}`, params);
84.    
85.     // 模拟查询延迟
86.     await new Promise(resolve => setTimeout(resolve, 100));
87.    
88.     // 模拟查询结果
89.     if (sql.startsWith("INSERT")) {
90.       return { insertId: Math.floor(Math.random() * 1000) };
91.     } else if (sql.startsWith("SELECT")) {
92.       return [
93.         { id: 1, name: "John Doe", email: "john@example.com" },
94.         { id: 2, name: "Jane Smith", email: "jane@example.com" }
95.       ];
96.     }
97.    
98.     return { affectedRows: 1 };
99.   }
100. }
102. // 用户服务
103. class UserService {
104.   private db: DatabaseService;
105.   
106.   constructor(db: DatabaseService) {
107.     this.db = db;
108.   }
109.   
110.   async beginTransaction() {
111.     return this.db.beginTransaction();
112.   }
113.   
114.   async commitTransaction(transaction: any) {
115.     return this.db.commitTransaction(transaction);
116.   }
117.   
118.   async rollbackTransaction(transaction: any) {
119.     return this.db.rollbackTransaction(transaction);
120.   }
121.   
122.   @transactional()
123.   async createUserWithProfile(userData: any, profileData: any) {
124.     // 获取当前事务
125.     const transaction = getCurrentTransaction(this);
126.    
127.     // 创建用户
128.     const userResult = await this.db.query(
129.       "INSERT INTO users (name, email) VALUES (?, ?)",
130.       [userData.name, userData.email],
131.       transaction
132.     );
133.    
134.     const userId = userResult.insertId;
135.    
136.     // 创建用户档案
137.     await this.db.query(
138.       "INSERT INTO profiles (user_id, bio, avatar) VALUES (?, ?, ?)",
139.       [userId, profileData.bio, profileData.avatar],
140.       transaction
141.     );
142.    
143.     // 返回创建的用户和档案
144.     return {
145.       user: { id: userId, ...userData },
146.       profile: { userId, ...profileData }
147.     };
148.   }
149.   
150.   @transactional()
151.   async transferFunds(fromUserId: number, toUserId: number, amount: number) {
152.     // 获取当前事务
153.     const transaction = getCurrentTransaction(this);
154.    
155.     // 检查发送方账户余额
156.     const balanceResult = await this.db.query(
157.       "SELECT balance FROM accounts WHERE user_id = ?",
158.       [fromUserId],
159.       transaction
160.     );
161.    
162.     if (balanceResult.length === 0) {
163.       throw new Error("Sender account not found");
164.     }
165.    
166.     const balance = balanceResult[0].balance;
167.    
168.     if (balance < amount) {
169.       throw new Error("Insufficient funds");
170.     }
171.    
172.     // 从发送方账户扣除金额
173.     await this.db.query(
174.       "UPDATE accounts SET balance = balance - ? WHERE user_id = ?",
175.       [amount, fromUserId],
176.       transaction
177.     );
178.    
179.     // 向接收方账户添加金额
180.     await this.db.query(
181.       "UPDATE accounts SET balance = balance + ? WHERE user_id = ?",
182.       [amount, toUserId],
183.       transaction
184.     );
185.    
186.     // 记录交易
187.     await this.db.query(
188.       "INSERT INTO transactions (from_user_id, to_user_id, amount) VALUES (?, ?, ?)",
189.       [fromUserId, toUserId, amount],
190.       transaction
191.     );
192.    
193.     return { success: true, message: "Transfer completed" };
194.   }
195. }
197. // 测试
198. const db = new DatabaseService();
199. const userService = new UserService(db);
201. // 测试创建用户和档案
202. console.log("\n=== Test 1: Create user with profile ===");
203. userService.createUserWithProfile(
204.   { name: "John Doe", email: "john@example.com" },
205.   { bio: "Software developer", avatar: "avatar.jpg" }
206. ).then(result => {
207.   console.log("Result:", result);
208. }).catch(error => {
209.   console.error("Error:", error.message);
210. });
212. // 测试资金转账 - 成功
213. console.log("\n=== Test 2: Transfer funds (success) ===");
214. userService.transferFunds(1, 2, 100)
215.   .then(result => {
216.     console.log("Result:", result);
217.   })
218.   .catch(error => {
219.     console.error("Error:", error.message);
220.   });
222. // 测试资金转账 - 余额不足（应该回滚）
223. console.log("\n=== Test 3: Transfer funds (insufficient funds) ===");
224. userService.transferFunds(1, 2, 10000)
225.   .then(result => {
226.     console.log("Result:", result);
227.   })
228.   .catch(error => {
229.     console.error("Error:", error.message);
230.   });

复制代码

案例3：性能监控与优化

装饰器可以用于监控应用性能，帮助识别和解决性能瓶颈。

2. // 性能监控装饰器
3. function performanceMonitor(thresholdMs: number = 100) {
4.   return function(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
5.     const originalMethod = descriptor.value;
6.    
7.     descriptor.value = async function(...args: any[]) {
8.       const startTime = performance.now();
9.       const memoryBefore = process.memoryUsage();
10.       
11.       try {
12.         // 执行原始方法
13.         const result = await originalMethod.apply(this, args);
14.         
15.         const endTime = performance.now();
16.         const memoryAfter = process.memoryUsage();
17.         const duration = endTime - startTime;
18.         
19.         // 计算内存使用差异
20.         const memoryDiff = {
21.           rss: memoryAfter.rss - memoryBefore.rss,
22.           heapTotal: memoryAfter.heapTotal - memoryBefore.heapTotal,
23.           heapUsed: memoryAfter.heapUsed - memoryBefore.heapUsed,
24.           external: memoryAfter.external - memoryBefore.external
25.         };
26.         
27.         // 记录性能数据
28.         console.log(`[PERFORMANCE] ${propertyKey} completed in ${duration.toFixed(2)}ms`);
29.         console.log(`[MEMORY] Usage difference:`, {
30.           rss: `${(memoryDiff.rss / 1024 / 1024).toFixed(2)} MB`,
31.           heapTotal: `${(memoryDiff.heapTotal / 1024 / 1024).toFixed(2)} MB`,
32.           heapUsed: `${(memoryDiff.heapUsed / 1024 / 1024).toFixed(2)} MB`,
33.           external: `${(memoryDiff.external / 1024 / 1024).toFixed(2)} MB`
34.         });
35.         
36.         // 如果执行时间超过阈值，记录警告
37.         if (duration > thresholdMs) {
38.           console.warn(`[PERFORMANCE WARNING] ${propertyKey} exceeded threshold of ${thresholdMs}ms`);
39.          
40.           // 这里可以添加额外的性能分析逻辑
41.           // 例如：记录调用堆栈、分析参数等
42.         }
43.         
44.         return result;
45.       } catch (error) {
46.         const endTime = performance.now();
47.         const duration = endTime - startTime;
48.         
49.         console.error(`[PERFORMANCE] ${propertyKey} failed after ${duration.toFixed(2)}ms`);
50.         console.error(`[ERROR]`, error);
51.         
52.         throw error;
53.       }
54.     };
55.    
56.     return descriptor;
57.   };
58. }
60. // 缓存装饰器
61. function cache(ttlMs: number = 5000) {
62.   const cacheStore = new Map<string, { value: any; expiry: number }>();
63.   
64.   return function(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
65.     const originalMethod = descriptor.value;
66.    
67.     descriptor.value = async function(...args: any[]) {
68.       // 生成缓存键
69.       const cacheKey = `${propertyKey}:${JSON.stringify(args)}`;
70.       
71.       // 检查缓存
72.       const cachedItem = cacheStore.get(cacheKey);
73.       if (cachedItem && Date.now() < cachedItem.expiry) {
74.         console.log(`[CACHE] Hit for ${propertyKey}`);
75.         return cachedItem.value;
76.       }
77.       
78.       // 缓存未命中，执行方法
79.       console.log(`[CACHE] Miss for ${propertyKey}`);
80.       const result = await originalMethod.apply(this, args);
81.       
82.       // 存入缓存
83.       cacheStore.set(cacheKey, {
84.         value: result,
85.         expiry: Date.now() + ttlMs
86.       });
87.       
88.       return result;
89.     };
90.    
91.     return descriptor;
92.   };
93. }
95. // 数据服务
96. class DataService {
97.   @performanceMonitor(50)
98.   @cache(10000) // 缓存10秒
99.   async fetchData(id: number) {
100.     console.log(`[SERVICE] Fetching data for ID: ${id}`);
101.    
102.     // 模拟网络请求
103.     await new Promise(resolve => setTimeout(resolve, 30 + Math.random() * 50));
104.    
105.     // 模拟数据处理
106.     let result = 0;
107.     for (let i = 0; i < 100000; i++) {
108.       result += Math.sqrt(i);
109.     }
110.    
111.     return {
112.       id,
113.       data: `Sample data for ID ${id}`,
114.       calculatedValue: result
115.     };
116.   }
117.   
118.   @performanceMonitor(200)
119.   async processData(data: any[]) {
120.     console.log(`[SERVICE] Processing ${data.length} items`);
121.    
122.     // 模拟复杂处理
123.     await new Promise(resolve => setTimeout(resolve, 100 + Math.random() * 150));
124.    
125.     // 模拟CPU密集型操作
126.     return data.map(item => {
127.       let processed = { ...item };
128.       
129.       // 模拟一些计算
130.       for (let i = 0; i < 10000; i++) {
131.         processed.value = Math.sqrt(item.id * i);
132.       }
133.       
134.       processed.processedAt = new Date().toISOString();
135.       return processed;
136.     });
137.   }
138. }
140. // 测试
141. const dataService = new DataService();
143. // 测试数据获取（第一次会从服务获取，第二次会从缓存获取）
144. console.log("\n=== Test 1: Fetch data (first call) ===");
145. dataService.fetchData(123)
146.   .then(result => {
147.     console.log("Result:", result.id);
148.   })
149.   .catch(console.error);
151. console.log("\n=== Test 2: Fetch data (second call - should be cached) ===");
152. dataService.fetchData(123)
153.   .then(result => {
154.     console.log("Result:", result.id);
155.   })
156.   .catch(console.error);
158. // 测试数据处理
159. console.log("\n=== Test 3: Process data ===");
160. const testData = Array.from({ length: 100 }, (_, i) => ({
161.   id: i + 1,
162.   name: `Item ${i + 1}`
163. }));
165. dataService.processData(testData)
166.   .then(result => {
167.     console.log(`Processed ${result.length} items`);
168.   })
169.   .catch(console.error);

复制代码

常见问题与解决方案

在使用TypeScript装饰器的过程中，开发者可能会遇到一些常见问题。下面我们探讨这些问题及其解决方案。

问题1：装饰器执行顺序

问题：多个装饰器应用于同一声明时，执行顺序可能不符合预期。

解决方案：理解装饰器的执行顺序。装饰器工厂函数从上到下执行，而装饰器函数从下到上执行。

2. function decoratorA() {
3.   console.log("decoratorA factory");
4.   return function(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
5.     console.log("decoratorA called");
6.   };
7. }
9. function decoratorB() {
10.   console.log("decoratorB factory");
11.   return function(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
12.     console.log("decoratorB called");
13.   };
14. }
16. class Example {
17.   @decoratorA()
18.   @decoratorB()
19.   method() {}
20. }
22. // 输出:
23. // decoratorA factory
24. // decoratorB factory
25. // decoratorB called
26. // decoratorA called

复制代码

问题2：装饰器与属性描述符

问题：属性装饰器不能修改属性描述符，导致无法直接添加getter/setter。

解决方案：使用Object.defineProperty在属性装饰器中重新定义属性。

2. function logChanges(target: any, propertyKey: string) {
3.   let value: any;
4.   
5.   const getter = function() {
6.     console.log(`Getting value for ${propertyKey}`);
7.     return value;
8.   };
9.   
10.   const setter = function(newVal: any) {
11.     console.log(`Setting value for ${propertyKey} to ${newVal}`);
12.     value = newVal;
13.   };
14.   
15.   Object.defineProperty(target, propertyKey, {
16.     get: getter,
17.     set: setter,
18.     enumerable: true,
19.     configurable: true
20.   });
21. }
23. class MyClass {
24.   @logChanges
25.   myProperty: string;
26. }
28. const instance = new MyClass();
29. instance.myProperty = "test";
30. console.log(instance.myProperty);

复制代码

问题3：装饰器与继承

问题：装饰器在继承层次结构中的行为可能不符合预期，特别是当子类覆盖了父类的装饰方法时。

解决方案：了解装饰器如何影响继承链，并在必要时手动处理继承情况。

2. function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
3.   const originalMethod = descriptor.value;
4.   
5.   descriptor.value = function(...args: any[]) {
6.     console.log(`[${target.constructor.name}] Calling ${propertyKey}`);
7.     return originalMethod.apply(this, args);
8.   };
9.   
10.   return descriptor;
11. }
13. class Parent {
14.   @log
15.   method() {
16.     console.log("Parent method implementation");
17.   }
18. }
20. class Child extends Parent {
21.   @log
22.   method() {
23.     super.method();
24.     console.log("Child method implementation");
25.   }
26. }
28. const child = new Child();
29. child.method();
31. // 输出:
32. // [Child] Calling method
33. // [Parent] Calling method
34. // Parent method implementation
35. // Child method implementation

复制代码

问题4：装饰器与私有属性

问题：装饰器无法直接访问类的私有属性或方法。

解决方案：使用TypeScript的元数据或反射API，或者将需要访问的成员改为protected/public。

2. function accessPrivate(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
3.   const originalMethod = descriptor.value;
4.   
5.   descriptor.value = function(...args: any[]) {
6.     // 无法直接访问私有属性
7.     // console.log(this.privateProperty); // 错误
8.    
9.     // 使用反射API访问
10.     const privateValue = (this as any)["privateProperty"];
11.     console.log(`Accessed private property: ${privateValue}`);
12.    
13.     return originalMethod.apply(this, args);
14.   };
15.   
16.   return descriptor;
17. }
19. class MyClass {
20.   private privateProperty = "secret";
21.   
22.   @accessPrivate
23.   method() {
24.     console.log("Method called");
25.   }
26. }
28. const instance = new MyClass();
29. instance.method();

复制代码

问题5：装饰器与异步方法

问题：装饰器在处理异步方法时可能无法正确处理Promise。

解决方案：在装饰器中检查返回值是否为Promise，并相应地处理。

2. function asyncLog(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
3.   const originalMethod = descriptor.value;
4.   
5.   descriptor.value = async function(...args: any[]) {
6.     console.log(`[${propertyKey}] Started`);
7.    
8.     try {
9.       const result = originalMethod.apply(this, args);
10.       
11.       // 检查是否返回Promise
12.       if (result && typeof result.then === 'function') {
13.         const awaitedResult = await result;
14.         console.log(`[${propertyKey}] Completed successfully`);
15.         return awaitedResult;
16.       }
17.       
18.       console.log(`[${propertyKey}] Completed successfully`);
19.       return result;
20.     } catch (error) {
21.       console.error(`[${propertyKey}] Failed:`, error);
22.       throw error;
23.     }
24.   };
25.   
26.   return descriptor;
27. }
29. class AsyncService {
30.   @asyncLog
31.   async asyncMethod() {
32.     await new Promise(resolve => setTimeout(resolve, 100));
33.     return "Async result";
34.   }
35.   
36.   @asyncLog
37.   syncMethod() {
38.     return "Sync result";
39.   }
40. }
42. const service = new AsyncService();
44. service.asyncMethod().then(console.log);
45. console.log(service.syncMethod());

复制代码

问题6：装饰器与严格模式

问题：在TypeScript严格模式下，装饰器可能会遇到类型检查问题。

解决方案：使用适当的类型注解和类型断言，确保装饰器函数的类型安全。

2. // 使用适当的类型注解
3. function typedDecorator(
4.   target: Object,
5.   propertyKey: string | symbol,
6.   descriptor: TypedPropertyDescriptor<(...args: any[]) => any>
7. ) {
8.   const originalMethod = descriptor.value!;
9.   
10.   descriptor.value = function(this: any, ...args: any[]) {
11.     console.log(`[${String(propertyKey)}] Called with args:`, args);
12.     return originalMethod.apply(this, args);
13.   };
14.   
15.   return descriptor;
16. }
18. class StrictClass {
19.   @typedDecorator
20.   method(arg1: string, arg2: number): boolean {
21.     console.log(`Method called with ${arg1} and ${arg2}`);
22.     return true;
23.   }
24. }
26. const instance = new StrictClass();
27. instance.method("test", 123);

复制代码

总结与展望

TypeScript装饰器是一种强大的元编程特性，它允许开发者以声明式的方式增强类、方法、属性和参数的功能。通过本文的深入探讨，我们了解了装饰器的基本概念、类型、实际应用场景以及实战技巧，并看到了装饰器如何在实际项目中提升代码质量和开发效率。

装饰器的优势

1. 关注点分离：装饰器可以将横切关注点（如日志、验证、缓存等）与业务逻辑分离，使代码更加清晰和可维护。
2. 代码复用：装饰器可以在多个地方重用，减少重复代码，提高开发效率。
3. 声明式编程：装饰器提供了一种声明式的方式来添加功能，使代码更加简洁和易读。
4. 元编程能力：装饰器提供了一种在运行时修改或扩展代码行为的能力，增加了代码的灵活性。

关注点分离：装饰器可以将横切关注点（如日志、验证、缓存等）与业务逻辑分离，使代码更加清晰和可维护。

代码复用：装饰器可以在多个地方重用，减少重复代码，提高开发效率。

声明式编程：装饰器提供了一种声明式的方式来添加功能，使代码更加简洁和易读。

元编程能力：装饰器提供了一种在运行时修改或扩展代码行为的能力，增加了代码的灵活性。

装饰器的局限性

1. 实验性特性：装饰器在TypeScript中仍然是一个实验性特性，其API和实现可能会在未来的版本中发生变化。
2. 性能开销：装饰器可能会引入一些性能开销，特别是在频繁调用的方法上。
3. 调试复杂性：由于装饰器在运行时修改代码行为，可能会增加调试的复杂性。
4. 学习曲线：对于初学者来说，装饰器的概念和工作原理可能需要一些时间来理解。

实验性特性：装饰器在TypeScript中仍然是一个实验性特性，其API和实现可能会在未来的版本中发生变化。

性能开销：装饰器可能会引入一些性能开销，特别是在频繁调用的方法上。

调试复杂性：由于装饰器在运行时修改代码行为，可能会增加调试的复杂性。

学习曲线：对于初学者来说，装饰器的概念和工作原理可能需要一些时间来理解。

未来展望

随着ECMAScript装饰器提案的推进，TypeScript装饰器的实现可能会进一步标准化和完善。我们可以期待：

1. 更稳定的API：随着装饰器提案的成熟，TypeScript可能会提供更稳定和一致的装饰器API。
2. 更好的工具支持：IDE和其他开发工具可能会提供更好的装饰器支持，包括代码提示、重构和调试功能。
3. 更广泛的应用：随着装饰器的普及，我们可能会看到更多的框架和库采用装饰器作为其核心特性。
4. 性能优化：未来的TypeScript版本可能会优化装饰器的实现，减少其性能开销。

更稳定的API：随着装饰器提案的成熟，TypeScript可能会提供更稳定和一致的装饰器API。

更好的工具支持：IDE和其他开发工具可能会提供更好的装饰器支持，包括代码提示、重构和调试功能。

更广泛的应用：随着装饰器的普及，我们可能会看到更多的框架和库采用装饰器作为其核心特性。

性能优化：未来的TypeScript版本可能会优化装饰器的实现，减少其性能开销。

最佳实践建议

1. 合理使用装饰器：不要过度使用装饰器，只在确实需要横切关注点时使用。
2. 保持装饰器简单：尽量保持装饰器函数简单和专注，避免在装饰器中实现复杂的逻辑。
3. 提供清晰的文档：为自定义装饰器提供清晰的文档，说明其用途、参数和行为。
4. 考虑性能影响：在性能敏感的代码中使用装饰器时，要考虑其性能影响，必要时进行性能测试。
5. 遵循命名约定：为装饰器函数和装饰器工厂使用一致的命名约定，提高代码可读性。

合理使用装饰器：不要过度使用装饰器，只在确实需要横切关注点时使用。

保持装饰器简单：尽量保持装饰器函数简单和专注，避免在装饰器中实现复杂的逻辑。

提供清晰的文档：为自定义装饰器提供清晰的文档，说明其用途、参数和行为。

考虑性能影响：在性能敏感的代码中使用装饰器时，要考虑其性能影响，必要时进行性能测试。

遵循命名约定：为装饰器函数和装饰器工厂使用一致的命名约定，提高代码可读性。

总之，TypeScript装饰器是一个强大的工具，可以帮助开发者编写更加清晰、可维护和高效的代码。通过合理地使用装饰器，我们可以显著提升代码质量和开发效率，使我们的应用程序更加健壮和易于维护。随着TypeScript和JavaScript生态系统的不断发展，装饰器无疑将在未来的前端和后端开发中扮演更加重要的角色。