如何创建一个装饰器来生成一个新的 class 属性，该属性是装饰属性的映射或转换

Question

I'm trying to figure out how to write a decorator that consumes an already existing class property and generates a mapped or transformed version of that property that also updates every time the value of the original property updates.

For example, @upperCase would generate a new property (with the key `${DECORATED_PROPERTY}_UPPERCASE` ) that converts the string to upper case, and @double would generate a new property (with the key `${DECORATED_PROPERTY}_DOUBLE` ) that doubles the value of every number in an array.

class MyClass {
  @upperCase word = 'hamburger';
  @double numbers = [1, 2, 3, 4];
}

const foo = new MyClass();
console.log(foo.word_UPPERCASE); // 'HAMBURGER'
console.log(foo.numbers_DOUBLE); // [2, 4, 6, 8]

foo.word = 'new word';
// See the derived property update in accordance with the original when the original changes value
foo.word_UPPERCASE = 'NEW WORD';

I've played around with Object.defineProperty and the get and set properties on it, but nothing seems to work. For example, when I try this implementation for @upperCase :

export function upperCase(target:any, propertyKey:string) {
  let value:string = target[propertyKey];

  const getter = function () {
    return value.toUpperCase();      // Error below gets thrown at this line
  }

  const setter = function (newVal:string) {
    value = newVal;
  }

  Object.defineProperty(target, `${propertyKey}_UPPERCASE`, {
    get: getter,
    set: setter,
  })
}

and use it in the class like @upperCase word:string = 'foobar'; , if I then console.log(this['word_UPPERCASE']) , I get the following error:

TypeError: can't access property "toUpperCase", value is undefined thrown at the line commented above where the getter is trying to return value.toUpperCase() .

Answer 1

Thanks to Aluan Haddad , the answer is simply:

function upperCase(target:any, propertyKey:string) {

  Object.defineProperty(target, `${propertyKey}_UPPERCASE`, {
    get: function () {
      return this[propertyKey].toUpperCase();
    },
    enumerable: true,
  })

}

To use:

class MyClass {
  @upperCase word:string = 'hello';
  word_UPPERCASE!:string;

  constructor() {
    console.log(this.word);
    console.log(this.word_UPPERCASE);
  }
}

// Output:
// hello 
// HELLO