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

推荐答案

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

-- -------------------- ---- -------
-------- ------------------- ---- ---- ------- -
    --- ----- - ------------

    ----- ------ - ---------- -
        -------------------- ------ -----------
        ------ ------
    --

    ----- ------ - ---------------- ---- -
        -------------------- ------ ------------
        ----- - -------
    --

    ----------------------------- ---- -
        ---- -------
        ---- -------
        ----------- -----
        ------------- ----
    ---
-

----- ------- -
    ------------
    ------ ------- -------
-

----- -------- - --- ----------
--------------- - ------- -------- -- --- ------- ------ ------ ------
----------------------------- -- --- ------- ------ ------ ------ ---- ------ ------

本题详细解读

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!。

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