在属性装饰器中获取属性类实例

Question

我正在尝试编写一个@Prop 装饰器来帮助我设置自定义元素属性。

这是我想要实现的代码：

class MyClass extends HtmlElement {
   get text() {
     return this.getAttribute('text')
   }

   set text(newVal){
     this.setAttribute('text', newVal)
   }

   connectedCallback() {
     this.innerHTML = `<div>${this.text}</div>`
   }
}

这是带有装饰器的类

class MyClass extends HtmlElement {
   @Prop() text: string;

   connectedCallback() {
     this.innerHTML = `<div>${this.text}</div>`
   }
}

这是装饰器函数

const Prop = () => (target : any, key : string) => {
    const getter = () => target.getAttribute(key);
    const setter = (newVal) => target.setAttribute(key, newVal);

    if (!delete this[key]) return;
    Object.defineProperty(target, key, {
        get: getter,
        set: setter
    });
}

但是，每当调用 getter 函数时，我都会收到此错误：

Uncaught TypeError: Illegal invocation
    at HTMLElement.getter (app.js:16)

查看app.js:16 会发现这行代码：

const getter = () => target.getAttribute(key);

target.getAttribute(key); 带有下划线。

Answer 1

要定义 getter 和 setter，不要只是删除属性然后重新添加它，而是使用属性描述符

const Prop = () => (target : any, key : string, descriptor: PropertyDescriptor) => {
  // Could be inlined...
  const getter = () => target.getAttribute(key);
  const setter = (newVal) => target.setAttribute(key, newVal);

  descriptor.set = setter
  descriptor.get = getter
}

https://www.typescriptlang.org/docs/handbook/decorators.html

Answer 2

装饰器以类作为目标而不是类的实例来调用。该类的实例将以this 的形式出现在getter /setter 函数中。这就是为什么在这里使用箭头函数不是一个好主意，因为它们从声明站点捕获this。在这种情况下，使用常规函数效果最好。

const Prop = () => (target: any, key: string, descriptor: PropertyDescriptor) => {
    const getter = function (this: HTMLElement) {
        return this.getAttribute(key);
    }
    const setter = function (this: HTMLElement, newVal) {
        this.setAttribute(key, newVal);
    }
    descriptor = descriptor || {};
    descriptor.get = getter;
    descriptor.set = setter;
    return descriptor;
}

class MyClass extends HTMLElement {
    @Prop() text: string;

    connectedCallback() {
        this.innerHTML = `<div>${this.text}</div>`
    }
}