[Typescript] 데코레이터 Decorators

• 메타 프로그래밍 하는 데 매우 유용하게 사용 됨
  • 메타 프로그래밍이란?
  • end user가 페이지를 방문하는데, 보통 곧바로 영향을 주기에 데코레이터를 사용하지 않음
  • 대신에 코드를 쓰는 데 적합하도록 만들어 데코레이터를 다른 개발자들이 사용하기 쉽게 함
  • 데코레이터는 실체화되기 전 클래스가 정의만 돼도 실행 됨

function Logger(constructor: Function) {
  console.log("Logging...");
  console.log(constructor);
}

@Logger
class Person1 {
  name = "Yum";

  constructor() {
    console.log("Creating person object...");
  }
}

const pers = new Person1();

console.log(pers);

• 위와 같이 데코레이터를 만드는 대신, 데코레이터 팩토리(factory)를 정의할 수 있음

데코레이터 팩토리 (factory)

function Logger(logString: string) {
  return function (constructor: Function) {
    console.log("Logging...");
    console.log(constructor);
  };
}

@Logger("LOGGING - PERSON")
class Person1 {
  name = "Yum";

  constructor() {
    console.log("Creating person object...");
  }
}

const pers = new Person1();

console.log(pers);

function Logger(logString: string) {
  return function (constructor: Function) {
    console.log("Logging...");
    console.log(constructor);
  };
}

function WithTemplate(template: string, hookId: string) {
  return function (_: Function) {
    const hookEl = document.getElementById(hookId);
    if (hookEl) {
      hookEl.innerHTML = template;
    }
  };
}

// @Logger("LOGGING - PERSON")
@WithTemplate("<h1> My Person Object <h2/>", "app")
class Person1 {
  name = "Yum";

  constructor() {
    console.log("Creating person object...");
  }
}

const pers = new Person1();

console.log(pers);