javascript - Typescript属性装饰器-需要帮助以了解以下情况吗？

我只是在尝试使用Typescript属性装饰器。但是，我无法理解以下代码的行为:

function dec(hasRole: boolean) {
    return function (target: any, propertyName: string) {
        let val = target[propertyName];
        Object.defineProperty(target, propertyName, {
            get() { return val; },
            set(value) { val = hasRole; }
        });
    }
}

class Hey {
    age: number;

    @dec(true)
    hasRole: boolean = false;

    constructor(age: number) {
        this.age = age;
    }
}

let ob = new Hey(22);
console.log(ob);

//实际输出:

age: 22
hasRole: true
__proto__:
  constructor: class Hey
  hasRole: true
  get hasRole: ƒ get()
  set hasRole: ƒ set(value)
  __proto__: Object

我预期的结果是:
1. OwnProperty-> hasRole = false
2.原型(prototype)属性-> hasRole = true。
装饰器参数中的“目标”用作静态成员的构造函数或实例成员的类原型(prototype)。

有人可以向我解释此功能吗？

最佳答案

为了清楚地理解它，您应该看看transpiled version

function dec(hasRole) {
    return function (target, propertyName) {
        let val = target[propertyName];
        Object.defineProperty(target, propertyName, {
            get() { return val; },
            set(value) { val = hasRole; }
        });
    };
}
class Hey {
    constructor(age) {
        this.hasRole = false;
        this.age = age;
    }
}
__decorate([
    dec(true)
], Hey.prototype, "hasRole", void 0);
let ob = new Hey(22);
console.log(ob);

从上面的代码中应该很清楚，首先装饰了类，然后才创建一个新实例

这意味着在执行构造函数时，已在Prototype中定义了hasRole，因此将this.hasRole分配给任何对象都没有任何效果:它总是在decorator中分配给hasRole参数(即true)