请解释如何在 TypeScript 中使用装饰器实现属性的拦截和代理？

推荐答案

在 TypeScript 中，装饰器可以用来拦截和代理属性的访问。通过使用 Property Decorator，我们可以在属性被访问或修改时执行自定义的逻辑。以下是一个简单的示例，展示了如何使用装饰器实现属性的拦截和代理：

// www.javascriptcn.com code example
function logProperty(target: any, key: string) {
    let value = target[key];

    const getter = function() {
        console.log(`Getting value: ${value}`);
        return value;
    };

    const setter = function(newVal: any) {
        console.log(`Setting value: ${newVal}`);
        value = newVal;
    };

    Object.defineProperty(target, key, {
        get: getter,
        set: setter,
        enumerable: true,
        configurable: true
    });
}

class MyClass {
    @logProperty
    public myProp: string;
}

const instance = new MyClass();
instance.myProp = "Hello, World!"; // 输出: Setting value: Hello, World!
console.log(instance.myProp); // 输出: Getting value: Hello, World! 并返回: Hello, World!

本题详细解读

1. 装饰器的基本概念

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

2. 属性装饰器

属性装饰器是一个函数，它接收两个参数：

• target：对于静态成员来说是类的构造函数，对于实例成员来说是类的原型。
• key：属性的名称。

3. 实现属性拦截和代理

在上面的示例中，logProperty 是一个属性装饰器。它通过 Object.defineProperty 方法重新定义了属性的 getter 和 setter，从而在属性被访问或修改时执行自定义的逻辑。

• Getter：当属性被访问时，getter 函数会被调用，并输出当前的值。
• Setter：当属性被修改时，setter 函数会被调用，并输出新的值。

4. 使用装饰器

在 MyClass 类中，myProp 属性被 @logProperty 装饰器修饰。当 myProp 被访问或修改时，装饰器中定义的 getter 和 setter 逻辑会被执行。

5. 运行结果

• 当 instance.myProp = "Hello, World!" 时，setter 函数会输出 Setting value: Hello, World!。
• 当 console.log(instance.myProp) 时，getter 函数会输出 Getting value: Hello, World! 并返回 Hello, World!。

通过这种方式，装饰器可以轻松地实现属性的拦截和代理，从而在属性访问或修改时执行自定义的逻辑。