打字稿属性装饰器奇怪的行为

Question

我有一个简单的类

class Component {
  @id() instanceId: string;

  @id() secondaryId: string;

  log() {
    console.log(this.instanceId, this.secondaryId);
  }
}

和一个装饰师

const id = (): PropertyDecorator => {
  return (target, name) => {
    const descriptor = {
      get(this: any) {
        const propertyName = `__${String(name)}`;

        if (!this[propertyName]) {
          this[propertyName] = 'MY ID';
        }

        return this[propertyName];
      },
      enumerable: true,
      configurable: true
    };

    Object.defineProperty(target, name, descriptor);
  };
};

我的tsconfig.json 看起来像这样：

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictBindCallApply": true,
    "noImplicitThis": true,
    "noImplicitReturns": true,
    "alwaysStrict": true,
    "esModuleInterop": true,
    "declaration": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "strictPropertyInitialization": false,
    "target": "ESNext",
    "module": "CommonJS",
    "moduleResolution": "node",
    "types": [
      "node"
    ]
  }
}

当我执行以下操作时：

const cmp = new Component();
cmp.log();

我希望 "MY ID", "MY ID" 将打印在控制台中，但我得到的是 undefined, undefined。

此示例在 TS playground (link) 中按预期工作，但在本地甚至在 CodeSandbox (link) 上都不起作用。

怎么了？

Answer 1

试试这个

const id = (): PropertyDecorator => {
  return (target:any, name) => {
    const propertyName = `__${String(name)}`;

    if (!target[propertyName]) {
      target[propertyName] = 'MY ID';
    }

    const descriptor = {
      value: target[propertyName],
      enumerable: true,
      configurable: true
    };

    Object.defineProperty(target, name, descriptor);
  };
};

playground link

更新

targetparam 指的是应用装饰器的对象。

nameparam 是应用装饰器的属性或方法的名称。