TS Decorator

2025-02-05
tsdecorator

데코레이터란?

데코레이터는 클래스나 메서드에 추가 기능을 붙이는 함수.
쉽게 말해, 기존 코드에 손대지 않고 기능을 확장할 수 있는 방법


기본 개념 (함수로 데코레이터 만들기)

데코레이터는 함수를 감싸서 실행을 변경하는 방식으로 동작합니다.

function Logger(target: any) {
  console.log(`클래스 ${target.name}가 생성됨!`);
}

@Logger
class User {} // "클래스 User가 생성됨!" 출력됨

@LoggerUser 클래스에 붙이면, User가 정의될 때 Logger() 함수가 실행됩니다.


메서드 데코레이터

클래스 전체가 아니라, 특정 메서드만 감싸는 것도 가능합니다.

function Log(target: any, key: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  console.log(
    `target:${JSON.stringify(target)}, key:${key}, ${JSON.stringify(
      descriptor
    )}`
  );
  descriptor.value = function (...args: any[]) {
    console.log(`메서드 ${key} 실행됨!`);
    return originalMethod.apply(this, args); // this가 달라질 수도 있기 때문에 처리
  };
}

class User {
  @Log
  sayHello() {
    console.log("Hello!");
  }
}

const user = new User();
user.sayHello();
// 출력:
// target:{},
// key:sayHello,
// {"writable":true,"enumerable":false,"configurable":true}
// "메서드 sayHello 실행됨!"
// "Hello!"
  1. target은 현재 인스턴스 객체의 클래스입니다.
  2. key는 데코레이터를 적용할 속성 이름입니다(문자열).
  3. descriptor는 해당 속성의 설명자 객체입니다.
  • @LogsayHello() 실행 전에 console.log()를 추가하는 역할을 합니다.