请解释如何在 TypeScript 中使用装饰器实现缓存的失效和更新？

推荐答案

在 TypeScript 中，可以使用装饰器来实现缓存的失效和更新。以下是一个示例代码，展示了如何通过装饰器来实现缓存功能，并在特定条件下使缓存失效或更新。

// www.javascriptcn.com code example
const cache = new Map<string, any>();

function cacheDecorator(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;

    descriptor.value = function (...args: any[]) {
        const cacheKey = JSON.stringify(args);

        if (cache.has(cacheKey)) {
            console.log('Cache hit');
            return cache.get(cacheKey);
        }

        console.log('Cache miss');
        const result = originalMethod.apply(this, args);
        cache.set(cacheKey, result);
        return result;
    };

    return descriptor;
}

function invalidateCache() {
    cache.clear();
    console.log('Cache invalidated');
}

class MyClass {
    @cacheDecorator
    expensiveOperation(input: number): number {
        // 模拟一个耗时的操作
        return input * 2;
    }
}

const instance = new MyClass();
console.log(instance.expensiveOperation(5)); // Cache miss, 10
console.log(instance.expensiveOperation(5)); // Cache hit, 10

invalidateCache();
console.log(instance.expensiveOperation(5)); // Cache miss, 10

本题详细解读

1. 缓存装饰器的实现

• cacheDecorator 函数：这是一个方法装饰器，它接收三个参数：target（类的原型）、propertyKey（方法名）和 descriptor（属性描述符）。装饰器的作用是拦截方法的调用，并在方法执行前检查缓存中是否已有结果。如果有，则直接返回缓存结果；如果没有，则执行原始方法并将结果存入缓存。

• cache 对象：使用 Map 数据结构来存储缓存数据，键是方法的参数序列化后的字符串，值是方法的返回结果。

2. 缓存失效的实现

• invalidateCache 函数：这个函数用于清空缓存。通过调用 cache.clear()，可以清除所有缓存数据，从而实现缓存的失效。

3. 使用示例

• MyClass 类：在这个类中，expensiveOperation 方法被 @cacheDecorator 装饰。每次调用该方法时，装饰器会先检查缓存，如果缓存中有结果则直接返回，否则执行方法并将结果存入缓存。

• 缓存失效：在调用 invalidateCache 函数后，缓存被清空，再次调用 expensiveOperation 方法时，缓存失效，方法会重新执行并将结果存入缓存。

通过这种方式，可以在 TypeScript 中使用装饰器实现缓存的失效和更新。