面试题：深入理解 TypeScript 装饰器与元数据反射机制的性能优化及陷阱

性能优化点

减少装饰器嵌套：过多的装饰器嵌套会增加运行时的计算量。尽量简化装饰器的层级结构，将多个装饰器的功能合并到一个装饰器中，如果功能复杂，可将内部逻辑封装成独立函数在装饰器中调用。例如，原本有 @decorator1、@decorator2 嵌套在方法上，若 decorator1 和 decorator2 功能有相关性，可整合为 @combinedDecorator。
缓存元数据：对于频繁读取的元数据，可进行缓存。比如在类加载时，将类或方法上的元数据读取并缓存到一个对象中，后续需要使用时直接从缓存中获取，而不是每次都通过反射机制去读取。例如：

const metadataCache = new Map();
function getMetadata(target: any, key: string) {
    if (!metadataCache.has(target)) {
        metadataCache.set(target, new Map());
    }
    const targetCache = metadataCache.get(target);
    if (!targetCache.has(key)) {
        const metadata = Reflect.getMetadata(key, target);
        targetCache.set(key, metadata);
    }
    return targetCache.get(key);
}

延迟加载装饰器逻辑：对于一些非必要在装饰器定义时就执行的逻辑，可延迟到实际调用时执行。例如，一个装饰器用于权限检查，可在方法被调用时才真正进行权限验证，而不是在装饰器应用时就做复杂的权限计算。

可能出现的陷阱

兼容性问题：不同的运行环境（如不同版本的 Node.js 或浏览器）对装饰器和元数据反射机制的支持程度不同。一些较旧的环境可能不支持最新的装饰器语法或元数据反射特性。
装饰器顺序问题：装饰器的应用顺序会影响最终结果。如果装饰器之间存在依赖关系，错误的顺序可能导致功能异常。例如，一个装饰器用于日志记录，另一个用于事务处理，若日志记录装饰器在事务处理之后，可能无法记录到事务开始前的信息。
元数据丢失：在某些情况下，如使用工具进行代码转换（如 Babel）时，元数据可能会丢失。这是因为工具在转换代码过程中可能没有正确保留元数据相关的信息。

避免陷阱的方法

兼容性处理：在项目开始时，确定目标运行环境，查阅相关文档了解其对装饰器和元数据反射的支持情况。对于不支持的环境，可采用 polyfill 方案，如 reflect - metadata 库提供了在不支持环境下模拟元数据反射的功能。同时，关注目标环境的更新，及时调整代码以利用新的支持特性。
明确装饰器顺序：在设计装饰器时，清晰定义每个装饰器的功能和依赖关系，文档化装饰器的正确应用顺序。在实际使用中，严格按照规定顺序应用装饰器。例如，对于上述日志和事务处理的例子，规定日志记录装饰器应在事务处理之前应用。
元数据保留配置：在使用代码转换工具（如 Babel）时，确保正确配置以保留元数据。对于 Babel，可通过安装 @babel/plugin - proposal - decorators 和 @babel/plugin - proposal - metadata 插件，并正确配置其参数，保证元数据在转换过程中不丢失。

实际场景解决方案

假设我们有一个大型企业级应用，其中有很多 API 接口方法，需要对接口进行权限验证和日志记录。

定义装饰器：

import 'reflect - metadata';

const PERMISSION_KEY = 'permission';

// 权限验证装饰器
function requirePermission(permission: string) {
    return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
        Reflect.defineMetadata(PERMISSION_KEY, permission, target, propertyKey);
        const originalMethod = descriptor.value;
        descriptor.value = function (...args: any[]) {
            const userPermissions = getCurrentUserPermissions();// 假设此函数获取当前用户权限
            if (!userPermissions.includes(permission)) {
                throw new Error('Permission denied');
            }
            return originalMethod.apply(this, args);
        };
        return descriptor;
    };
}

// 日志记录装饰器
function logMethod() {
    return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
        const originalMethod = descriptor.value;
        descriptor.value = function (...args: any[]) {
            console.log(`Calling method ${propertyKey} with args:`, args);
            const result = originalMethod.apply(this, args);
            console.log(`Method ${propertyKey} returned:`, result);
            return result;
        };
        return descriptor;
    };
}

应用装饰器：

class APIController {
    @logMethod()
    @requirePermission('admin:read')
    getUsers() {
        // 实际获取用户的逻辑
        return ['user1', 'user2'];
    }
}

在这个场景中，通过合理设计装饰器，先进行日志记录装饰器的应用，再进行权限验证装饰器的应用，并且利用元数据来存储权限信息，同时在权限验证逻辑中采用延迟加载的方式，在方法调用时才进行权限检查，有效避免了可能出现的陷阱并优化了性能。

面试题：深入理解 TypeScript 装饰器与元数据反射机制的性能优化及陷阱

知识考点

面试题答案

性能优化点

可能出现的陷阱

避免陷阱的方法

实际场景解决方案