面试题：TypeScript多装饰器组合的执行顺序及应用场景

Question

描述在TypeScript中多个类装饰器组合使用时的执行顺序。并举例说明在实际前端开发场景中，多装饰器组合能解决什么样的复杂问题，比如在一个用户权限管理系统的前端页面组件上如何运用多装饰器。

Answer 1

多个类装饰器组合使用时的执行顺序

在TypeScript中，多个类装饰器组合使用时，执行顺序是从下到上（或者说是从靠近类定义的装饰器到远离类定义的装饰器）。也就是说，最靠近类定义的装饰器最先执行，而最外层的装饰器最后执行。

实际前端开发场景举例 - 用户权限管理系统的前端页面组件

假设我们有一个用户权限管理系统，在前端页面组件中可能有不同权限的用户访问不同功能。

// 模拟权限验证装饰器
function requirePermission(permission: string) {
    return function (target: any) {
        // 这里可以添加逻辑，比如在运行时检查用户是否有该权限
        console.log(`组件 ${target.name} 需要 ${permission} 权限`);
        return target;
    };
}

// 模拟日志记录装饰器
function logComponent(target: any) {
    console.log(`记录组件 ${target.name} 的使用`);
    return target;
}

@requirePermission('admin')
@logComponent
class AdminOnlyComponent {
    // 组件逻辑
}

在上述例子中，logComponent 装饰器更靠近类定义，所以它会先执行，打印 记录组件 AdminOnlyComponent 的使用，然后 requirePermission('admin') 装饰器执行，打印 组件 AdminOnlyComponent 需要 admin 权限。

通过这种多装饰器组合，可以将不同的功能关注点分离。例如，在用户权限管理系统中，权限验证和日志记录是不同的功能，通过装饰器可以轻松地将这些功能添加到不同的组件上，使得代码结构更清晰，功能复用性更高。 这样可以很方便地对不同组件根据用户权限进行控制，并且记录组件的使用情况，以便后续分析和优化。