面试题：TypeScript装饰器在类属性上的应用

// 定义装饰器
function logProperty(target: any, propertyKey: string) {
    let value: any;

    const getter = function() {
        console.log(`获取属性 ${propertyKey} 的值:`, value);
        return value;
    };

    const setter = function(newValue: any) {
        console.log(`设置属性 ${propertyKey} 的值为:`, newValue);
        value = newValue;
    };

    if (delete target[propertyKey]) {
        Object.defineProperty(target, propertyKey, {
            get: getter,
            set: setter,
            enumerable: true,
            configurable: true
        });
    }
}

// 使用装饰器的类
class MyClass {
    @logProperty
    myProperty: string;

    constructor() {
        this.myProperty = '初始值';
    }
}

// 测试
const myInstance = new MyClass();
console.log(myInstance.myProperty); 
myInstance.myProperty = '新值';

装饰器工作原理

定义装饰器函数 logProperty：该函数接收两个参数，target 表示被装饰的对象（对于属性装饰器，target 是包含该属性的类的原型对象），propertyKey 是被装饰属性的名称。
定义 getter 和 setter 函数：
- getter 函数在获取属性值时被调用，它打印获取属性值的日志，并返回实际的属性值。
- setter 函数在设置属性值时被调用，它打印设置属性值的日志，并更新实际的属性值。
使用 Object.defineProperty：通过 Object.defineProperty 方法，将带有 getter 和 setter 函数的属性重新定义到 target 上。delete target[propertyKey] 确保先删除原有的属性定义，以便正确设置新的访问器属性。
在类中使用装饰器：在 MyClass 类的 myProperty 属性上应用 @logProperty 装饰器，这样当获取或设置 myProperty 的值时，就会触发相应的日志打印。

星途面试题库

面试题：TypeScript装饰器在类属性上的应用

知识考点

面试题答案

装饰器工作原理