面试题：自定义TypeScript装饰器在Angular复杂业务场景中的优化实践

设计并实现自定义TypeScript装饰器：

首先，创建一个用于权限验证的装饰器。假设我们有一个简单的权限服务来判断用户是否有特定权限。

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  hasPermission(permission: string): boolean {
    // 实际实现中这里应该与后端交互或从本地存储等获取权限信息
    return true; // 示例返回true
  }
}

export function HasPermission(permission: string) {
  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;
    descriptor.value = function (...args: any[]) {
      const authService = new AuthService();
      if (authService.hasPermission(permission)) {
        return originalMethod.apply(this, args);
      } else {
        console.log('用户没有权限执行此操作');
        return null;
      }
    };
    return descriptor;
  };
}

在组件方法上应用装饰器：

在Angular组件中，假设我们有一个组件需要对某个方法进行权限验证。

import { Component } from '@angular/core';
import { HasPermission } from './has - permission.decorator';

@Component({
  selector: 'app - my - component',
  templateUrl: './my - component.html'
})
export class MyComponent {
  @HasPermission('edit - user')
  editUser() {
    console.log('执行编辑用户操作');
  }
}

提升可维护性：
- 集中管理权限逻辑：将权限验证逻辑从各个组件方法中抽离出来，统一在装饰器中实现。如果权限验证规则发生变化，例如需要从后端获取最新权限列表，只需要修改装饰器中的逻辑，而不需要在每个使用权限验证的组件方法中进行修改。
- 代码简洁：在组件中，只需要使用装饰器 @HasPermission('permission - name') 来标记需要权限验证的方法，使组件代码更加简洁，可读性更强，减少了重复的权限验证代码块。
提升性能：
- 减少重复代码执行：由于权限验证逻辑集中在装饰器中，避免了在每个组件方法中重复编写权限验证代码，从而减少了代码执行的冗余，提升了性能。例如，如果有100个组件方法都需要进行权限验证，使用装饰器后，权限验证逻辑只在装饰器中执行一次，而不是在每个方法中都执行一遍。
- 延迟验证：在装饰器中可以实现延迟验证机制，例如缓存权限验证结果。如果在短时间内多次调用同一个有权限验证的方法，并且权限没有发生变化，可以直接从缓存中获取验证结果，而不需要再次执行权限验证逻辑，进一步提升性能。

面试题：自定义TypeScript装饰器在Angular复杂业务场景中的优化实践

知识考点

面试题答案